How to make a text overlay a div with image?

Question

How to make a text overlay a div with image?

Navigation

#1 by (0 votes)

2

I can not make the text "Text I want to override." stay on top of the div "textDiv" that has an image as background, please help me.

HTML

<div class="divLeft">
    <img id="photo" src="photo.png">

    <div class="textDiv">
        <h2><i id="spaceText" class="fas fa-search"></i>Texto que quero sobrepor.</h2>
    </div>
</div>

CSS

.divLeft {
    width: 49.5%;
    height: 949px;
    float: left;
}

#spaceText {
    padding-right: 16px;
}

#photo {
    width: 1600px;
    height: 949px;
}

html css

asked by anonymous 07.05.2018 / 00:27

1 answer

Insert data if another INSERT is executed successfully Problems filtering table contents using select

score 0 · Accepted Answer

Set position: absolute to div .textDiv and position: relative to div .divLeft . Then you can position as you want with top and left .

Remembering that the image is not a background , it is just a normal image and you are positioning a layer (the div .textDiv ) on it.

.divLeft {
    width: 49.5%;
    height: 949px;
    float: left;
    position: relative;
}

#spaceText {
    padding-right: 16px;
}

#photo {
    width: 1600px;
    height: 949px;
}

.textDiv{
   position: absolute;
   top: 0;
   left: 0;
   
   /*cor apenas para exmplo*/
   color: #fff;
}

<div class="divLeft">
    <img id="photo" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"><divclass="textDiv">
        <h2><i id="spaceText" class="fas fa-search"></i>Texto que quero sobrepor.</h2>
    </div>
</div>