Forum Home
PC World Chat
 
Thread ID: 124390 2012-04-24 02:18:00 Web page, screen resolution Metla (12) PC World Chat
Post ID Timestamp Content User
1271565 2012-04-24 02:18:00 Greetings folks,

Thowing together a page, Would like to use a single image as the background, Is there a way to set it to display to match the browser window?

If not, then what size would I go for?

1920x1080 looks stunning on my screen, But I'm using a 32" LCD, It don't look so good on my laptop.... 		Metla (12)
1271566 2012-04-24 03:01:00 You could do it using javascript. The script would detect the screen res and select the background image to suit. You would just have to have a couple of images of different resolution to begin with.
There may be a server-size script that may do the same thing if you have .cgi or .php access, I'm not sure. Server side would be better as some browsers work with javascript in different ways with mixed results. 		Iantech (16386)
1271567 2012-04-24 04:14:00 That's what I asked last week.
Thanks to no-one for their help.

What I did in the end was:

<body style="margin: 0px; color: rgb(0, 0, 0); background-color: black; background-image: url(VintageBackground.gif); height: 100%; width: 100%;" bgproperties="fixed" background-color: transparent; width: 80%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">


Which mostly worked, except to the right it has a bigger margin. 		pctek (84)
1271568 2012-04-24 05:47:00 hmmmm.

Thats the sound I make when something goes over my head.

Happens quite often.

Lmfao. 		Metla (12)
1271569 2012-04-24 06:21:00 ok, been digging about...

In your <body> tag write onLoad="JavaScript:SetBackground()"
And in your body (right after your body tag) write


<script language="JavaScript">
function SetBackground() {
if (screen.width == 800) {
document.body.background = "image-location/800x600.gif";
}
else if (screen.width == 1024) {
document.body.background = "image-location/1024x768.gif";
}
else {
document.body.background = "image-location/1920x1080.gif"
}
}
</script>
This example sets a background for 800x600 and 1024x768 and anything that is not those will default to 1920x1080. Change the desired screen resolutions to whatever you want and images to whatever they are. Add other "else if" lines if you want to specify more resolutions. Does that help? 		Iantech (16386)
1271570 2012-04-24 06:23:00 Sweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeet.

In the meantime I'll fudge it but I'll come back to this thread. 		Metla (12)
1271571 2012-04-24 07:27:00 Surely there must be a way to do it with CSS. Javascript just seems so kludgy Greven (91)
1271572 2012-04-24 21:43:00 Here she blows

http://safetyhq.co.nz 		Metla (12)
1271573 2012-04-24 22:43:00 Looks good :) Zippity (58)
1271574 2012-04-24 23:00:00 Surely there must be a way to do it with CSS. Javascript just seems so kludgy

For different backgrounds for different resolutions, not that I'm aware. I used to do this on my site too. 		pcuser42 (130)
1 2