CODEWITHSUNDEEP
cssbackground-imagebackground-size
coutier eric
coutier eric

Reputation: 1019

How to make div with background-image act like like <img "width=100%"/>

I have this code:

div#fond {
  background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg');
  background-size: cover;
  height: 100%;
  width: 100%;
}
<!DOCTYPE html>
<html>
<body>
  <div id="fond">
    ABCD
  </div>
  <br>
  <img src="https://www.thetileapp.com/images/Purse_Tabletop-46.jpg" width="100%" />
</body>

</html>

How can i do to make the div have the same behaviour than the img, so that the height of the div adapt itself to the width of the window. For the moment, the height is adapted to div content.

Upvotes: 1

Views: 1478

Answers (1)

Aziz
Aziz

Reputation: 7783

For percentage height to work, you must add html, body {height: 100%;} otherwise the browsers will not be able to calculate a percentage of auto which is the default. Percentage heights work based on parnet, when the parent is body/html, you need to add the rules I mentioned.

Alternatively, you can use the viewport units (vw/vh), like:

div#fond {
  background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg');
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

Upvotes: 3

Related Questions