CODEWITHSUNDEEP
htmlcss
bellotas
bellotas

Reputation: 2461

Div with background-image and height auto

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

enter image description here

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

enter image description here

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.

Upvotes: 2

Views: 2149

Answers (2)

Adrian Danlos
Adrian Danlos

Reputation: 447

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>

Upvotes: 1

Maneesh
Maneesh

Reputation: 408

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

Upvotes: 3

Related Questions