How to place text over the image?

Question

I want to place text over the image like the following picture shows :

enter image description here

HTML that I wrote is :

<body>
<div class="image_holder">
    <img src="bg2.jpg" /> 
    <div class="overlay"> </div>
</div>

<div>NHS SUB</div>   
</body>

CSS :

    .image_holder {
    position:relative;
    float:left;
}

.overlay {
    position:absolute;
    top:0;
    background-color:rgba(34,70,118,0.7);
    width:100%;
    height:100%;
}

The text will automatically go after the image. What should I do to place the text over the image ?

This link may help too http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css — AgileDan, Aug 18 '14 at 14:30

score 0 · Answer 1 · answered Aug 18 '14 at 14:31

Try this

<div class="image_holder">
    <div class="overlay">NHS SUB</div>
</div>

Style

.image_holder{
  background:url('img.jpg');
}

Another Way

<div class="image_holder">
    <img src="img.jpg"/>
    <div class="overlay">NHS SUB</div>
</div>

STYLE

.img_holder{
   position:relative;
}
.img_holder img{
   postion:absolute;
   z-index:-1;
}
.overlay{
   z-index:1;
}

score 0 · Answer 2 · answered Aug 18 '14 at 14:40

Your div class's look like they should infact be ID's. ID's are unique where as class's are used across numerous elements.

Although your nested div approach will work when applying the correct styles, a more semantic (and less markup) would be using Ben's approach - code:

    <div class="mydiv" style="background-image:url('bg2.jpg');">overlay text here</div>
    <div>NHS SUB</div>

How to place text over the image?

2 Answers2