homepage Welcome to WebmasterWorld Guest from 54.211.219.178
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Adjusting Background Images
How to set background images to different screen resolutions
pseudonymph




msg:1207553
 5:52 pm on Apr 10, 2003 (gmt 0)

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




msg:1207554
 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.

pseudonymph




msg:1207555
 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:

[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




msg:1207556
 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.

pseudonymph




msg:1207557
 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 :)

le_gber




msg:1207558
 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?

Leo

pseudonymph




msg:1207559
 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?

le_gber




msg:1207560
 3:41 pm on Apr 13, 2003 (gmt 0)

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

Leo

grahamstewart




msg:1207561
 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..

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%).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved