CODEWITHSUNDEEP
htmlcssimage
StealthTrails
StealthTrails

Reputation: 2415

Background image is not showing in css

I have searched on the internet and found that setting body, html height, width to 100% will fix the issue but it did not. I have this html: 

<body>
    <div class="container index">
        <div class="row">
            <div class="buttons">

                <!--learn alphabets button-->
                <a>
                    <div class="col-3 learn">
                        <p>
                            Learn
                        </p>
                    </div>
                </a>
            </div><!--buttons end here-->
        </div><!--row ends here-->
    </div><!--container ends here-->

</body>

and in my css: 

.index{
    background-image: url("../images/index-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

I have defined the width and height to body and html: 

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

but the image is not showing up unless I set the height of .index in px.
Why is that so?

Upvotes: 0

Views: 288

Answers (3)

Chris
Chris

Reputation: 59491

You have to give your .index class a height. Either a static or dynamic.

.index{
   height: 100%;
   background-image: url("../images/index-bg.jpg");
   background-size: cover;
   background-repeat: no-repeat;
}

Jsfiddle

Upvotes: 0

Miguel
Miguel

Reputation: 20633

Stretch the .index container as well to fill the space of the body, otherwise it will only be as tall as the content inside.

 html,
 body {
     height: 100%;
     width: 100%;
 }
 .index {
     background-image: url("http://lorempixel.com/g/500/500");
     background-size: cover;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
 }

DEMO: http://jsfiddle.net/64917998/1/

Upvotes: 3

Alejalapeno
Alejalapeno

Reputation: 1008

You do not have a height applied to your .index div. The background will only be as tall as the content that div contains.

.index {
    background-image: url("../images/index-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100%;
}

Upvotes: 3

Related Questions