Resizing background using CSS and Javascript according to screen resolution

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[s] = st[s];
}
document.body.appendChild(bgimg);

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[s] = st[s];
}
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

"Seige" <bl******@gmail.com> posted:
<snip>
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[s] = st[s];
}
document.body.appendChild(bgimg);
</snip>

Shouldn't that for statement read as...

for (s in st) {
bgimg.style[s] = st[s];
}

???

--
Jim Carlock
Post replies to the group.

So Mr Grumpy-o-Randy, what do you propose?
I could answer that but my terminology the last time I did was debated
over my choice of words. Search for my name, the work wikipedia in the
archives, you can find my choice of words for you there.
screen.clientWidth?screen.clientwidth:screen.width ;
clientwidth is more meaningful to you than screen.width, for the reason
I gave.

Knowing the width of my browser window means something, knowing the
width of my desktop is useless in a browser.
height isn't particularly of my concern because width is more dependent
in a design unless its a horizontal website.

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

Randy Webb wrote:

[...]
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.

--
Bart

Bart Van der Donck wrote:

Randy Webb wrote:

[...]
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.

--
Bart

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

Seige wrote:

Bart Van der Donck wrote:

Randy Webb wrote:
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...

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

Dag Sunde wrote:

Seige wrote:

Bart Van der Donck wrote:
Randy Webb wrote:
> 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...

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

Randy Webb wrote:

[...]
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.

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

Randy Webb wrote:

[...]
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/

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