CODEWITHSUNDEEP
htmlcss
panthro
panthro

Reputation: 24069

CSS Full Screen Background - Jumping When Page Changes

I'm using a full sized background via:

background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Q1. When my page expands to show extra content, the bg jumps to get larger, is there a way to stop this?

Q2. What would be a good work around or fallback for cover bg's for IE7-8?

Thanks

Upvotes: 0

Views: 956

Answers (1)

Sheriff_McLawDog
Sheriff_McLawDog

Reputation: 71

Correct me if I am wrong, but I am assuming that you are trying to keep your background image from expanding/moving vertically, right? If that is the case, then maybe this CSS will do what you want it to:

    background-image: url('/static/img/background/my_bg.jpg');
    background-size: auto 1080px;
    background-position: center top;
    background-repeat: no-repeat;

The background vertical size is set to 1080px but you can set that to whatever you want just so it is a static value ( The auto* value for width will simply preserve your image aspect ratio ). That should keep the picture from scaling. Using Center Top for positioning instead of Center Center should keep your picture anchored at the top middle so it wont shift downward if the page is expanded vertically.

If you want the image to scale down but only scale up to a certain point I think you will need to use a Div Tag to encompass your whole page and set the image as a background of the Div. From there you should be able to set your image to scale and also set max-width and max-height.

If this doesn't help, more information about the effect you are trying to achieve would be appreciated. :)

Upvotes: 1

Related Questions