Css background image doesn't display if height not set (why not adjusting automatically?)

Question

I want to include background image which is oversized (4000px x 3000px) in the div, in such a way that width will take max width of the screen and height will adjust to it.

I don't know why but it doesn't work if the height is not specified (like 1000px). The image doesn't appear at all.

I wanted to make jsfiddle but there it works (probably because height is somehow specified automatically)

The part of code (HTML):

<section id="panels">
  <h1>PANELS</h1>
  <div class="section-img">
    <!-- here i want the image -->                 
  </div>
</section>

The part of code (CSS):

.section-img {
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: center center;    
    background-image: url("path/to/my/image");
    max-width: 100%;
    width: 100%;
    height: auto;
}

And with this code nothing appears (as it looks the height is 0px), how can i do the thing that height will adjust to size of width i.e. scales itself.

Are you using any external styling options like bootstrap that might override your settings? — Adin Sijamija, Aug 07 '20 at 13:45
Assuming you know image dimensions you can count height of image in percent of width and then specify padding-top for block in percents. Percents in padding are counted from width of element. https://developer.mozilla.org/en-US/docs/Web/CSS/padding — Sergiy T., Aug 07 '20 at 13:50
Have you tried adding image as an element inside your div, and then giving it `z-index: -1` so it shows as a background, since your div is empty currently and it's auto height is 0 — Никола Тошић, Aug 07 '20 at 13:51
You will need to add position and z-index on both. Read more about z-index here: https://www.w3schools.com/cssref/pr_pos_z-index.asp — Никола Тошић, Aug 07 '20 at 13:55
Does this answer your question? [Why doesn't the background image show up without specific width and height?](https://stackoverflow.com/questions/32175195/why-doesnt-the-background-image-show-up-without-specific-width-and-height) — disinfor, Aug 07 '20 at 15:02

Kirubel · Answer 1 · 2020-08-07T13:49:53.023

0

In your example, the div is inheriting the width of the parent section tag, taking into account any margin or padding on the body element. It has display: block so width is 100% , height is auto so it's the size of whatever inside. So in your case there's nothing inside the div tag, which means it's height: auto; value is 0.

.section-img {
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: center center;    
    background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
    max-width: 100%;
    width: 100%;
    height: 100px; // auto means 0 if there's nothing in your div element
    display: block; // this is a default for every div tag
}

<section id="panels">
  <h1>PANELS</h1>
  <div class="section-img">
    <!-- here i want the image -->                 
  </div>
</section>

edited Aug 07 '20 at 13:49

answered Aug 07 '20 at 13:47

Kirubel

1,461
1
14
33

but you just set the height to 100px. My image is bigger... I want the image width to scale down to screen size... and then height to scale automatically – emsiiggy Aug 07 '20 at 13:49
Yes, as I said in my answer `div` have no height, meaning it will take the height of whatever inside it. Without setting the height of your `div` class background image will not be displayed. – Kirubel Aug 07 '20 at 13:51
is it possible to create inside this div another div which will take height of the div with image and in that case it will have something inside so not 0 ? – emsiiggy Aug 07 '20 at 13:55
nah, it doesn't work. I will try to use normal image in HTML and then do something with z-index – emsiiggy Aug 07 '20 at 14:04

score 0 · Answer 2 · answered Aug 07 '20 at 14:09

0

Just try this replace the auto with 100% in height and check.

answered Aug 07 '20 at 14:09

Usman Ibrahim

1
1

score 0 · Answer 3 · answered Aug 07 '20 at 14:55

.section-img {
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;    
    background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
    max-width: 100%;
    width: 100%;
    height: 100%; 
    display: block;
    position:absolute;
    top:20%;
    bottom:0;
    right:0;
    left:0;
}

<section id="panels">
  <h1>PANELS</h1>
  <div class="section-img">
    <!-- here i want the image -->                 
  </div>
</section>

Are you like this .

Css background image doesn't display if height not set (why not adjusting automatically?)

3 Answers3