Image size scroll problem

I don’t know if there’s a solution to this problem, but if there is, I’d like to know.

I have an image of x pixels width and y pixels height. I want to have this picture as a background, but if a user has a resolution of less then x pixels wide or less than y pixels high I don’t want scroll bars too appear. Of course I could simply set there to be no scrolls, but there is actual content on the page, and if that extends beyond the resolution I need the scrolls.

Is this possible, and if so, how?

I guess you have put the image in the html. :slight_smile:

If you instead use css to place the image as a background, on e.g. the body or the main wrapper, it will be clipped to fit the changing container size.


body {
    background: url(image.jpg) no-repeat center top;
}

Try this:

Place the following HTML right below the <body> tag:

<div><img id="background" src="/pics/background.png" alt="" title="" /></div>

Then put this in your CSS:

#background {position : absolute; height : 100%; z-index : 1;}

Mike, if he does that then the image will be in front of everything that doesn’t have a higher z-index :frowning:

Thank you for replying. Actually my original problem was more difficult than what I originally described. We had different divs containing different pictures which together formed the background. I guess I shouldn’t have tried to over simplify my explaination of the problem.

Anyway, we actually created one complete image of the different background images and set it as background to the body tag instead, like you suggested. Thanks.

Be aware of the 1px background jog then on the <body> image (see FAQ at the top for more detail :))