How to make a text overlay a div with image?

Asked

Viewed 8,117 times

3

I can’t get the text "Text I want to overlay." to be on top of the div "textDiv" that is with an image as background, please help me please.

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

  • Div has no image as background.

  • try to use a z-index in the text you want to overwrite

  • "stay on top of the div "textDiv""... the text is inside the div... as well as be on top?

  • I want the text to be above the image

1 answer

1


Place position: absolute in div .textDiv and position: relative in div .divLeft. Then you position as you wish with top and left.

Remembering that the image is not a background, is just a normal image and you will be positioning a layer (a div .textDiv) about her.

.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">

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.