CODEWITHSUNDEEP
jqueryhtmlcss
pocockn
pocockn

Reputation: 2063

Make background image fill screen, currently height 0px

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;
}

Upvotes: 0

Views: 95

Answers (1)

MaartenPAC
MaartenPAC

Reputation: 43

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.

Upvotes: 1

Related Questions