Position text over image

Question

I have this image:

But i want to place text in the middle like this:

Answer 1

Create a div of the same width and height as your image and set the image as the background for the div using css. Put vertical alignment middle and horizontal alignment center on the div and add the text to it.

Answer 2

To me, this looks like an <img>, then some text in a <span> for example, and then a second <img>. If you put them all into a container that has text-align: center everything should be fine.

Answer 3

You can also use absolute positioning and z-index :

<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>

And in the CSS file :

.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }

Some nice references : http://www.w3schools.com/Css/pr_pos_z-index.asp

Answer 4

Using Pseudo Elements

The above could be created using the ::before and ::after pseudoelements of the containing element. For instnace, suppose we started with this:

<h1>Keep Calm and Stack Overflow</h1>

We could target the two pseudo elements, set their dimensions and background images, and get the same effect you are seeking above.

h1::before, h1::after {
    content: ""; display: block; height: 3em;
    background: url('ribbon.png') center center;
}

The above is a mere example of what you may write. For a fuller demo, please see this fiddle.

Using a Background Image (Original 2010 Answer)

Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-align to "center" for its CSS.

.imgBox  { 
    width: 300px; height: 100px; 
    background-image: url('bg.jpg');
}
.imgText { 
    text-align: center; 
    margin: 0; padding: 25px 0 0 0;
}

<div class="imgBox">
  <p class="imgText">Hello World</p>
</div>