Hello,

I am creating a new site and I have run into a problem with adding a background image to the html tag.

The image has repeat-x and is positioned top and right. The problem is that though it looks great on 1024 wide resolutions it goes balls up when the resolution is reduced. A large wad of whitespace appears to the right and the image moves left into the rest of the page.
I solved this by adding a min-width to the body and html tags but this stopped the wrapper div from moving left to fill the whole screen on lower resolutions.

Any solutions? Even using javascript instead of css would make me a happy man to be honest here...

The url is http://musicultra.com/test/test.html
Thanks
Dan

Recommended Answers

All 4 Replies

Thanks,
It looks like I will be rebuilding it in order to get the yellow background working properly though.

I tested it myself and it worked regardless of the resolution. What browser did this occur in?

This was in Firefox 3. I have just checked in Internet explorer 7 and it looks even worse.

When you use repeat, it will not load the next repetition unless the entire image will fit again. But I don't see your trouble. I see scrollbars appearing to scroll the page, rather than changes in the page.

Which image is repeated? I can't tell this without the stylesheet..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.