Question

I’m trying to make the layout of a website which has separate backgrounds for the header and footer. So this is basically how I do:

body{
    background: url(images/header.png) top center no-repeat,
            url(images/footer2.png) bottom center no-repeat,
                url(images/bg.jpg) fixed;
    background-size: contain, contain, auto;
}

The reason why I choose to do this is because when I apply the backgrounds for the header and footer (instead of the body), the background can not cover the width of the screen. But there’s this bug: when I zoom in or zoom out, only the size of the content changes, while the sizes of the backgrounds remain the same like in the screenshot below:

What could be the best solution in this case? I’m looking for a pure CSS solution (not having to alter the HTML markup). Please help me out and thanks.

Answer 1

Your problem is the use of contain in your background definition. This keeps the size of the image as big as the body, and the body is staying at full size.

Try using repeat-x instead of no-repeat, and set width part of the background-size to the same value as the width the header element has.

That should make it scale to match, unless I’m missing something.