Search code examples
blueprint-csscss

Does Blueprint prevent a 100% background-size for images in CSS?

I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.

I think the rule I have (as below) is clashing with Blueprint somehow.

body { 
    background:url('../img/bg.jpg') no-repeat; 
    background-size:100% 100%; 
    -moz-background-size:100% 100%; 
    -webkit-background-size:100% 100%; 
}

This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.

Here are two images of what I want and what I'm getting:

EXPECTED expected background display

WHAT I'M GETTING (regardless of browser size) display I'm getting

Please help me, I'm not sure how to proceed with this.

Here is my HTML setup for the page:

<body>
    <div class="container">
        <div id="navbar" class="span-6 last">
            <div id="logo" class="span-6 last"></div>
            <div id="menu">
                <ul>
                    <li class="menu-current"><a href="index.php">Home</a></li>
                    <li><a href="aboutus.php">About Us</a></li>
                    <li><a href="services.php">Services</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="content" class="span-18 last">

        </div>
    </div>
</body>

If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.

I was able to replicate the effect on JSFiddle:

http://jsfiddle.net/danhanly/TurW5/4/

Solution

  • Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.

    You can write. 

    html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
    margin:20px auto;
    width:960px;
    overflow:hidden}