Adjusting Background Images

How to set background images to different screen resolutions

[pseudonymph]

I have an html document with css. I created two separate html and css for the common screen sizes 800 & 1024. But if someone is using a larger or smaller screen resolution then the page looks wack. Is there a simple way to fix this? I’m definitely not created 5 separate pages :)

the site is <snip>

[edited by: Nick_W at 5:56 pm (utc) on April 10, 2003]
[edit reason] no urls please [/edit]

[BlobFisk]

Welcome [webmasterworld.com] to WebmasterWorld, pseudonymph!

If you want to use a high-resolution background image that fits different resolutions (and remember that while 800x600 and 1024x768 are the most common - there are a lot more! I use 1152x846 for example!) you can use some client side code to detect the users resolution and serve up the correct background image (using some conditionals) based on this.

[pseudonymph]

hey, thanks for the key words! it got me closer to where I wanted to be.
Anyone with larger screen resolutions to test it out?

This is actually what I was looking for:

[w3.org...]

[edited by: Nick_W at 10:00 pm (utc) on April 10, 2003]
[edit reason] TOS#10 - Please check sticky mail [/edit]

[scottmack]

The screen resolution is only one consideation. The size of the browser window is another factor. People using high resolution often don't run the browser maximized. Narrow your window some and the bg image will not fit in exactly. Plus there is differences in toolbars, scrollbar size, etc.

[pseudonymph]

You’re right. On the larger browsers there is a lot of white space around the background image. Is there a way to make this larger? For each one I mean, without writing a page for each screen size? All I managed to do was center the image :)

[le_gber]

Why not create a 100% table with a bgcolor close or exactly as your color image and create a table within with your image bg attached to it?

Leo

[pseudonymph]

would I add that to the css or the page itself. The background color that matches in css and the table with the image in the document?

[le_gber]

I think that the page is what will be the most reliable for browser compatibility.

Leo

[grahamstewart]

Why not create a 100% table with a bgcolor close or exactly as your color image and create a table within with your image bg attached to it?

Tables for layout. yuck. ;)

The CSS way to do this is..

body {
 color: #000000;
 background: #000055 url(yourpic.jpg) no-repeat fixed center center;
}

That gives you 'yourpic.jpg', centered on the page, with a blue (#000055) background.

It uses fixed positioning so it will not scroll with the rest of the page, if you want it to then change fized to scroll.

If you wanted it in a different position then you can use percentages instead of center center to specify the top and left position of the image (center center is the same as 50% 50%).