CSS background-image width 100% height auto

Question

I need some kind of an elegant solution for background-image width 100% height auto. It must be the same way as it behaves like as if you use image src. I will use the example of another question on stackoverflow as the answers there did not work for me, nor did they work correctly at all.

Note: I will be putting this in css grids which will have an auto width and the image itself will have a border.

If there is a js solution, as long as it works, i don't mind.

#image {
    background-image: url(http://www.w3schools.com/css/trolltunga.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}

<div id="image">some content here</div>

What do you mean by *behave like as if you use image src*? You want the height of the `div` to adjust to the height of the background image? That's not possible. — BenM, Jun 29 '18 at 13:06
@liroP , nice one. How could i have missed this. Seems like the padding trick will do the job and i can do a js for this. I assume all the answers will be related to the padding trick. — ScarletQueen, Jun 29 '18 at 13:29

score 0 · Answer 1 · answered Jun 29 '18 at 13:16

**<div id="image">some content here</div>** Div is taking the height based on the content it has. It cannot calculated the auto height. Background will check the height of div and based on that will show the image. Thus setting height:100% or height:auto will not figure out the height of background image.

You'll have to auto arrange height by giving div some padding or setting its height.

score 0 · Answer 2 · answered Jun 29 '18 at 13:26

You can set your containers height using a percentage based padding value. This way your container remains the aspect ratio of your background image. If you want add content inside of it you'll also need to add a child element with absolute positioning.

#image {
    background-image: url(http://www.w3schools.com/css/trolltunga.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding-top: 29.9%;
    position: relative;
}

#image .child {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="image">
  <div class="child">some content here</div>
</div>

score 0 · Answer 3 · answered Jun 29 '18 at 13:34

#image {
    background-image: url(http://www.w3schools.com/css/trolltunga.jpg);
        background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 30%;
}

<div id="image">some content here</div>

You just need to know the image ratio

for ex the image ratio was 1000x300
to get the padding-top (percentage) required use formula (300/1000 * 100)

score 0 · Answer 4 · answered Jun 29 '18 at 14:06

You can use -webkit-fill-available. It will give the expected result. But it works only in Chrome and Safari

#image {
    background-image: url(http://www.w3schools.com/css/trolltunga.jpg);
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: -webkit-fill-available;
}

<div id="image">some content here</div>

CSS background-image width 100% height auto

4 Answers4