Position text over image

Question

I have this image:

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

Answer 1

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:

Keep Calm and Stack Overflow

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;
}

  
Hello World