如何使文本显示在背景图像的顶部？

Question

I have used this approach https://stackoverflow.com/a/22211990

Only problem is that as soon as I enter text/content in div like this: <div>abc</div>

That text appear under the image.

Code: https://codepen.io/labeeb/pen/JMxzQY

 * { padding: 0px; margin: 0px; } .image { background: url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat; background-size: 100%; background-size: contain; height: 0; padding-top: 100.44%; /* (bg image width/ bg image height) * 100*/ } 

 <div class="image">aaa</div> 

Answer 1

You can give the image element position:relative and wrap the text in an element with position:absolute and top:0

 *{ padding:0px; margin:0px; } .relative { position:relative; } .text { position: absolute; color: red; top:0; } .image{ background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat; background-size:100%; height:0; padding-top:100.44%; /* (bg image width/ bg image height) * 100*/ } 

 <div class="image relative"> <div class="text">aaa</div> </div> 

Answer 2

For me : you choice is a bad strategy, because de the padding-top will always impact your content. It is not the background job.

My solution : combine height 100vh and background-size cover.

 *{ padding:0px; margin:0px; } .image{ color: white; height: 100vh; background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat; background-size:cover; } 

 <div class="image">aaa</div>