CODEWITHSUNDEEP
htmlcss
livetolearn
livetolearn

Reputation: 221

Issues with displaying an image in HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

           body, html {
              height: 100%;
              width: 100%;
           }

           .top {
               width: 800px;
               margin: 0 auto;
           }

           .topfixedimg{
                background-repeat: no-repeat;
                background-size: cover;
                background-image: url("image.jpg");
                background-position: center;
                background-attachment: fixed;
                width: 100%;
                height: 85%;
            }


        </style>
    </head>
    <body>
        <div class="top">
            <div class="topfixedimg"> </div>
        </div>
    </body>
</html>

If I don't add the height attribute in the CSS of the outermost "top" div, the above code snippet does not display the image.

If I add height, then it displays the image correctly.

Should it not take the height from the CSS of inner div element and still display the image, even without the height attribute in the CSS of the outermost div element ?

Upvotes: 3

Views: 69

Answers (2)

mehulmpt
mehulmpt

Reputation: 16547

85% height means 85% of the height of parent. Since you're not specifying any height to outer div, its height is 0px and thus 85% of 0 is 0.

Either specify the height of parent, or specify the height of inner div in px, em, rem, etc.

#outer {
width: 100px;
height: 100px;
background: red;
}

#inner {
width: 100px;
height: 50%;
background: green;
}
<div id="outer">
  <div id="inner"></div>
  <span>I'm just another element</span>
</div>

Upvotes: 8

user3725781
user3725781

Reputation: 735

The topfixedimg class has a height of 85%. This means display this element 85% of it’s parent (which in this instance is the ‘top’ div.

As the ‘top’ div doesn’t have a height set, it’s height is 0. So 85% of 0 is 0.

Upvotes: 1

Related Questions