CODEWITHSUNDEEP
htmlcss
Karem
Karem

Reputation: 18103

Position text over image

I have this image:

enter image description here

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

This is how i wanted.

How can I achieve this?

I would like to do this in html, so I would use a <div> or a <span>

Upvotes: 14

Views: 59614

Answers (4)

Sampson
Sampson

Reputation: 268344

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.

enter image description here

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>

Upvotes: 21

Furunomoe
Furunomoe

Reputation: 1404

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

Upvotes: 2

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 120937

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449435

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.

Upvotes: 0

Related Questions