CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr. Lavalamp
Mr. Lavalamp

Reputation: 1888

CSS: Resize background image rather than cutting off

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.

Upvotes: 0

Views: 3978

Answers (2)

Rajender Joshi
Rajender Joshi

Reputation: 4205

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 */

Upvotes: 1

Sikander
Sikander

Reputation: 2835

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

Upvotes: 3

Related Questions