Resizing background using CSS and Javascript according to screen resolution

[Seige]

Ever had headache when you can't resize the background width using CSS:
body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}

It won't work, would it? Of course not, it's not even defined in CSS.
So, let's try to work it out using Javascript:

There are two methods, first method you prepare plenty of different
width images, classifying them into 640, 800, 1024, 1280, 1600 and
whatever other sizes. Then you use javascript to detect screen width
and you're done. Easy but not exactly what I'm looking for.

Second method: create a layer (for the background image) to go beneath
the existing content and resizing the image according to the screen
width.

bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style = st;
}
document.body.appendChild(bgimg);

 

[Randy Webb]

Seige said the following on 6/19/2006 1:40 PM:

Ever had headache when you can't resize the background width using CSS:

Nope, can't say that I have.

body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}

It won't work, would it? Of course not, it's not even defined in CSS.
So, let's try to work it out using Javascript:

There are two methods, first method you prepare plenty of different
width images, classifying them into 640, 800, 1024, 1280, 1600 and
whatever other sizes. Then you use javascript to detect screen width
and you're done. Easy but not exactly what I'm looking for.

That one won't work reliably. screen width is irrelevant. Browser
viewport might be of help though.

Second method: create a layer (for the background image) to go beneath
the existing content and resizing the image according to the screen
width.

Thats trivial and doesn't need JS to do it.

bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style = st;
}
document.body.appendChild(bgimg);

That doesn't make it as tall as the viewport, or anything else for that
matter. And again, screen.width is irrelevant. A 2048 pixel wide image
wouldn't go real well in my 600 pixel wide browser window.

 

[Seige]

So Mr Grumpy-o-Randy, what do you propose?

screen.clientWidth?screen.clientwidth:screen.width;

height isn't particularly of my concern because width is more dependent
in a design unless its a horizontal website.

Seige said the following on 6/19/2006 1:40 PM:

Ever had headache when you can't resize the background width using CSS:

Nope, can't say that I have.

body{
background: url(/images/bg.jpg) ;
background-width: 800px;
}

It won't work, would it? Of course not, it's not even defined in CSS.
So, let's try to work it out using Javascript:

There are two methods, first method you prepare plenty of different
width images, classifying them into 640, 800, 1024, 1280, 1600 and
whatever other sizes. Then you use javascript to detect screen width
and you're done. Easy but not exactly what I'm looking for.

That one won't work reliably. screen width is irrelevant. Browser
viewport might be of help though.

Second method: create a layer (for the background image) to go beneath
the existing content and resizing the image according to the screen
width.

Thats trivial and doesn't need JS to do it.

bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style = st;
}
document.body.appendChild(bgimg);

That doesn't make it as tall as the viewport, or anything else for that
matter. And again, screen.width is irrelevant. A 2048 pixel wide image
wouldn't go real well in my 600 pixel wide browser window.

 

[Seige]

You're right. My appology for the mistake.

 

[Bart Van der Donck]

[...]
Knowing the width of my browser window means something, knowing the
width of my desktop is useless in a browser.

Objection, Your Honour !
E.g. I remember a js wallpaper script that offers the appropriate
wallpaper size according to the user's screen resolution.

 

[Seige]

[...]
Knowing the width of my browser window means something, knowing the
width of my desktop is useless in a browser.

Objection, Your Honour !
E.g. I remember a js wallpaper script that offers the appropriate
wallpaper size according to the user's screen resolution.

You did? can you recall where is it? or at the very least what method
did they use to resize the wallpaper dynamically?

 

[Dag Sunde]

[...]
Knowing the width of my browser window means something, knowing the
width of my desktop is useless in a browser.

Objection, Your Honour !
E.g. I remember a js wallpaper script that offers the appropriate
wallpaper size according to the user's screen resolution.

You did? can you recall where is it? or at the very least what method
did they use to resize the wallpaper dynamically?

With "wallpaper" here, I am fairly sure we're talking about the
background-image of the body element, and *not* the OS wallpaper...

You can find a lot about that if you do a search for "dynamic stylesheets"
or "changing css Javascript"...

 

[Matt Kruse]

With "wallpaper" here, I am fairly sure we're talking about the
background-image of the body element, and *not* the OS wallpaper...

On the contrary, I think Bart was referring to OS wallpaper. Otherwise,
screen resolution (rather than browser canvas size) would be irrelevant.

 

[Bart Van der Donck]

[...]
On the contrary, I think Bart was referring to OS wallpaper. Otherwise,
screen resolution (rather than browser canvas size) would be irrelevant.

Yes, I meant downloadable wallpapers intended for desktop backgrounds.
IIRC it went like this (quite simple):

if (screen.width>600) theIMG = '1.jpg';
if (screen.width>700) theIMG = '2.jpg';
etc.

 

[Dag Sunde]

On the contrary, I think Bart was referring to OS wallpaper.
Otherwise, screen resolution (rather than browser canvas size) would
be irrelevant.

Ouch... I didn't pay attention... I tought he said *change* wallpaper
from Javascript... That's why I interpreted it like that...

:-\

 

[Randy Webb]

Bart Van der Donck said the following on 6/22/2006 5:42 AM:

[...]
Knowing the width of my browser window means something, knowing the
width of my desktop is useless in a browser.

Objection, Your Honour !
E.g. I remember a js wallpaper script that offers the appropriate
wallpaper size according to the user's screen resolution.

But that is still useless in the browser itself. And with regards to the
question asked, it is still irrelevant. And JS wouldn't get my desktop
wallpaper size right either.

It would try to get me to download a 2048 wide wallpaper image when I
use a 1024 image for the height.

Makes my desktop size irrelevant again as I use dual monitors.

 

[Seige]

Good to know there's some discussion going on ...

so ... are we getting anywhere yet?

i'm still trying to think up a method to slide an IMG tag underneath
the entire page (or BODY tag) so that I can resize it...

Bart Van der Donck said the following on 6/22/2006 5:42 AM:

[...]
Knowing the width of my browser window means something, knowing the
width of my desktop is useless in a browser.

Objection, Your Honour !
E.g. I remember a js wallpaper script that offers the appropriate
wallpaper size according to the user's screen resolution.

But that is still useless in the browser itself. And with regards to the
question asked, it is still irrelevant. And JS wouldn't get my desktop
wallpaper size right either.

It would try to get me to download a 2048 wide wallpaper image when I
use a 1024 image for the height.

Makes my desktop size irrelevant again as I use dual monitors.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

 

[Matt Kruse]

i'm still trying to think up a method to slide an IMG tag underneath
the entire page (or BODY tag) so that I can resize it...

Which piece are you missing? The code to retrieve the size of the document
"canvas"?

If so, take a look at my Screen.getDocumentWidth() and
Screen.getDocumentHeight() functions in my "util" lib which is currently
being tweaked and prepared for release:
http://www.javascripttoolbox.com/lib/util/