2

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/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Dan Hanly
  • 7,829
  • 13
  • 73
  • 134

2 Answers2

2

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}
breezy
  • 1,910
  • 1
  • 18
  • 35
  • Was able to replicate the effect in JSFiddle, see my post for the link. – Dan Hanly May 19 '11 at 08:19
  • Ultimately it was that in the reset css that comes packaged with blueprint the `html{height:100%}` was missing. I added this in. Cheers! – Dan Hanly May 19 '11 at 08:34
0

Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.

Jared
  • 12,406
  • 1
  • 35
  • 39