| 5:58 pm on Apr 10, 2003 (gmt 0)|
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.
| 7:48 pm on Apr 10, 2003 (gmt 0)|
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:
[edited by: Nick_W at 10:00 pm (utc) on April 10, 2003]
[edit reason] TOS#10 - Please check sticky mail [/edit]
| 1:46 am on Apr 12, 2003 (gmt 0)|
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.
| 2:39 pm on Apr 13, 2003 (gmt 0)|
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 :)
| 3:27 pm on Apr 13, 2003 (gmt 0)|
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?
| 3:32 pm on Apr 13, 2003 (gmt 0)|
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?
| 3:41 pm on Apr 13, 2003 (gmt 0)|
I think that the page is what will be the most reliable for browser compatibility.
| 10:48 pm on Apr 13, 2003 (gmt 0)|
|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..
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%).