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

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.

Randy Webb wrote:

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/

[Jim Carlock]

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

[Seige]

You're right. My appology for the mistake.

Jim Carlock wrote:

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

[Randy Webb]

Seige said the following on 6/20/2006 11:10 AM:

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.

All websites are horizontal as well as vertical.

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

[Bart Van der Donck]

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

[Seige]

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?

[Dag Sunde]

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.

--
Bart

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

--
Dag.

[Matt Kruse]

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.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Bart Van der Donck]

Matt Kruse wrote:

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

--
Bart

[Dag Sunde]

Matt Kruse wrote:

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.

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

:-\

--
Dag.

[Randy Webb]

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/

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

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/

[Matt Kruse]

Seige wrote:

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/

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com