Make background image fill screen, currently height 0px

Question

I am creating a simple header section for my website with a large image. The image should fill the screen from below my nav to the bottom of the browser window. At the moment it's not displaying and is giving it a height of 0px. I can see it's pulling in the image correctly but not sure why it's not giving it a height.

Here is my html and css i'm using.

<!-- banner -->
    <div class="banner">
        <div class="welcome-message">
            <div class="wrap-info">
                <div class="information">
                    <h1 class="animated fadeInDown">Test Content</h1>
                    <p class="animated fadeInUp">This is a test</p>
                </div>
            </div>
        </div>
    </div>
<!-- banner-->

.banner {
    background: url(../images/photos/banner.jpg) no-repeat bottom center scroll;
    background-color: #000 !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    background-size: cover !important;
    -o-background-size: cover !important;
    width: 100%;
    height: auto;
}

We'd need to see this **not** working to diagnose. Could you make a demo or provide a link? Also, those `important` statements are probably unnecessary. — Paulie_D, Nov 03 '15 at 12:03
You could provide a minimal example of your problem e.g. on [JSFiddle](http://jsfiddle.net), so it's easier for people to reproduce and analyze it. — Cedric Reichenbach, Nov 03 '15 at 12:04
see `height:auto` won't make it adapt the `100%` height of the parent. — Jai, Nov 03 '15 at 12:06
@Jai Yes, but it should have *some* height due to the content. I'm wondering if there is a positioning issue or uncleared floats that are causing collapsing. — Paulie_D, Nov 03 '15 at 12:07
Make a jsFiddle that we can easily understand your accurate problem. Hope we can give you the solution. — Murad Hasan, Nov 03 '15 at 12:16
Possible duplicate of [How to stretch the background image to fill a div.](http://stackoverflow.com/questions/11223585/how-to-stretch-the-background-image-to-fill-a-div) — Avinash Jain, Nov 03 '15 at 12:21

MaartenPAC · Answer 1 · 2015-11-03T12:43:48.793

Firstly, you should change the background of your webpage and not the background of ".banner" class.

So add the following code to your css styles:

body {
background: url(../images/photos/banner.jpg) no-repeat center center fixed; 
background-size: cover;
background-position: 100% 150px;
}

OR

body {
background: url("http://www.nps.gov/ner/stsp/images/5C74E407-1DD8-B71C-0E0994FC86420E86.jpg")  no-repeat center center fixed; 
background-size: cover;
background-color: #000 !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
background-size: cover !important;
-o-background-size: cover !important;
background-position: 100% 150px;
}

To make the background start after nav simply adjust the "background-position: 100% 150px;" meaning 100% width and 150px from the top :) Heres a JSFIDDLE I made with a different picture because you didnt provide the one you are using.

Make background image fill screen, currently height 0px

1 Answers1