Background Image Issue

[wrathofall]

I am new here and this is my first post, so I hope it is in the correct location.

Here is my problem:

I am setting up a blog for a friend and he wants a background with static images on either side of the blog's content area. I created the background in Gimp with images on either side and worked on it until they were perfectly arranged on either side of the content area just as requested.

This looks perfect on my 21" widescreen monitor, but when viewed on any other sized screen, the images get lost or are moved.

I have come across floating css coding for images, but I don't think this is what I'm looking for. Is there code so that a background will resize according to the screen it is viewed on?

I really need help on this one I have spent a week looking for an answer now, with no success.

Thanks!

[mattur]

Physical screen size doesn't matter here it's the number of pixels available in the browser viewport that's important.

You need to modify your design to work on small screen sizes (e.g. 1024px wide), large screen sizes (e.g. 1920px wide) and everything in between. (People may of course use a browser window smaller than their screen resolution)

There's no easy way to resize a background image automatically with browser-window size. A bitmap image will distort at smaller/larger sizes anyway. So your best option is to design for small screens and then adapt it to work on large screens too.

eg you could have a centered fixed width page design with a large background image that still looks ok on small screens when the sides are cut off, or you could make your side images fit in a small screen and show a background colour or another background image at the sides on larger screens.

Another alternative is a flexible-width middle content column with fixed-size left and right columns for the images, so the whole page automatically expands/contracts with window size, varying the width of the content column but keeping left and right columns sized and positioned appropriately at the sides.

Have a look around at how other websites handle this, and choose the most appropriate solution for your design. HTH.

[wrathofall]

Thanks mattur!

So I should try to design it for 1024 x (height?). I will give this a try. Is there a code to specifically call out dimensions? Or do I just set it to 100%?

Thanks for your help!

[mattur]

When designing for 1024px bear in mind some space is taken up by browser chrome and scroll bars. So the actual width available for the page (without horizontal scroll bars) will be less than that. 960px wide is a commonly used fixed-width.

By default pages are liquid, i.e. flow to fill 100% of the screen width. For a fixed width design you would need to specify the width e.g. in CSS if your page is wrapped in a div with <div id="container">:

#container{
width:960px;
margin: 0 auto;
}

[mattur]

See also: [browsersize.googlelabs.com...]