Large Body Background Image

@novemberGreyFeb 19.2007

Hey can anyone give me some advice as to what I should make the size of my body background image if I want it to cover the browser window of most screen resolutions? The body background image I’m using is not one that can be vertically or horizontally tiled. Can someone help me out here?

to post a comment

CSS

@David_HarrisonFeb 19.2007 — #That's a tricky one, because if you make it too big then it's not possible to see most of the design on it, but if you make it too small then it looks a bit naff on bigger monitors.

Well, my resolution is 1600x1200, and I browse with the window maximised. But I know that there are people with 30" monitors running at 2560x1600, so I guess that's the upper limit. Though the height of the page depends on how much content you put in it. And to constrain the width you could set a max-width on a conteiner element and set the background on that, with some sort of border and then a suitable repeating background on the body.

Can you post the image you want to use? It might be possible to modify it to repeat in at least one direction.

@novemberGreyauthorFeb 19.2007 — #Here it is http://www.ccgulfbreeze.com/Preview/Background.jpg

@David_HarrisonFeb 19.2007 — #Ah, tricky.

Well the file size for that image is huge. Don't expect users on slow connections to hang around just for a background image. I'd suggest reducing the image in width to about 780px and having a gradual fade to a light blue at the bottom, where a background colour can take over. Then have your content in one column down the page.

Basically, a fixed width layout to fit on an 800x600 monitor. Perhaps you could push it to a fixed width 1024x768 layout if you can keep the background image size small enough.

@novemberGreyauthorFeb 19.2007 — #sounds good, thanks for your help

Large Body Background Image

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Large Body Background Image

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴