Div与背景图像和高度自动

Question

I am trying to display a div within a background-image . I have tried to do it in the same way that I would do it using an img but it does not work:

WITHIN IMG

HTML

<img class="scale" src="../../../assets/images/van-landing-2.JPG">

CSS

.scale {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

This is perfectly working. It shows an image that takes 100% of my screen and the height that should have to be proportional.

Photo

Nevertheless, when I try the same using a div it does not work. It displays nothing to cause it does not set a specific height, so It shows nothing.

WITHIN DIV

HTML

<div class="i-van"></div>

CSS

 .i-van {
  background-image: url("../../../assets/images/van-landing.JPG");
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

Photo

How could I do it? I have tried using min-height and it shows it but just the minimum height. I would like to show it all.

Answer 1

The background-image property is used to add a background to an element. This means that the content with in that element is what dictates its size. Additionally, height:auto is interpreted by the elements content.

What you can try is to use height:100% providing that the parent elements also have defined height values. This will stretch the element to the tallest height and scale your background image accordingly.

If you are looking to display the image at the exact size or aspect ratio of the image itself, then the element will need to be defined with the exact width and height of the image.

From a semantics perspective however, you should decide if the image you are displaying is part of the content of your page or a decorative part of the design. In general, you should use a <img /> tag for images that are content and background-image for images that are not.

You can learn more about background-image here

Answer 2

You have to declare a valid height for your background div. As Maneesh has said height:auto takes the element content's height.

• They key is to specify a height in vh or px.
• After that you can easily place your text div inside it and set it around with either flexbox or position absolute

Check the snippets! :)

CODE WITH FLEXBOX

 body { margin: 0; } .i-van { display: flex; align-items: center; justify-content: center; background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg); background-size: cover; background-position: center; max-width: 100%; height: 100vh; } #div-inside { font-size: 100px; color: white; } 

 <div class="i-van"> <div id="div-inside"> HELLO </div> </div> 

CODE WITH POSITION ABSOLUTE

 body { margin: 0; } .i-van { position: relative; background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg); background-size: cover; background-position: center; max-width: 100%; height: 100vh; } #div-inside { position: absolute; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */ font-size: 100px; color: white; } 

 <div class="i-van"> <div id="div-inside"> HELLO </div> </div>