CSS: Resize background image rather than cutting off

Question

I am using javascript to resize a div as the browser resizes, and to set it initially when the page loads. (Yes, I know it needs to degrade gracefully.) The reason I can't do it all via CSS is because there is a fixed nav bar with a constant height at the top of the screen that needs to be taken into account. I want to resize the div (and its gradient background) to fit the browser window, but when I change the CSS height property it just cuts the image off instead of resizing it, which means the next section of the page will not transition properly. Is there an easy fix to this?

Here's the CSS I'm using right now:

    #homepage_aboutstrip {
        background-image:url('home/images/gradient-about-background.png');
        background-repeat:repeat-x;
        position:absolute;
        margin-top:0px;
        width:100%;
        height:1050px;
        z-index:1;
    }

And using IMG tags rather than background-images would work obviously, but it isn't an option here.

Answer 1

You can do it with single line css. try this if it works

background-image:url('home/images/gradient-about-background.png');
background-size: cover

Quality of image may be disturbed if it expands too much

Answer 2

It works for me on IE7 as well.

background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */