Resizing background using CSS and Javascript according to screen resolution

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);

Seige said the following on 6/19/2006 1:40 PM:[color=blue]
> Ever had headache when you can't resize the background width using CSS:[/color]

Nope, can't say that I have.
[color=blue]
> 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.[/color]

That one won't work reliably. screen width is irrelevant. Browser
viewport might be of help though.
[color=blue]
> Second method: create a layer (for the background image) to go beneath
> the existing content and resizing the image according to the screen
> width.[/color]

Thats trivial and doesn't need JS to do it.
[color=blue]
> 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);
>[/color]

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/

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:[color=blue]
> Seige said the following on 6/19/2006 1:40 PM:[color=green]
> > Ever had headache when you can't resize the background width using CSS:[/color]
>
> Nope, can't say that I have.
>[color=green]
> > 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.[/color]
>
> That one won't work reliably. screen width is irrelevant. Browser
> viewport might be of help though.
>[color=green]
> > Second method: create a layer (for the background image) to go beneath
> > the existing content and resizing the image according to the screen
> > width.[/color]
>
> Thats trivial and doesn't need JS to do it.
>[color=green]
> > 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);
> >[/color]
>
> 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/[/color]

"Seige" <blogtemp@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.

You're right. My appology for the mistake.



Jim Carlock wrote:[color=blue]
> "Seige" <blogtemp@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.[/color]

Seige said the following on 6/20/2006 11:10 AM:[color=blue]
> So Mr Grumpy-o-Randy, what do you propose?[/color]

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.
[color=blue]
> screen.clientWidth?screen.clientwidth:screen.width ;[/color]

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.
[color=blue]
> height isn't particularly of my concern because width is more dependent
> in a design unless its a horizontal website.[/color]

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/

Randy Webb wrote:
[color=blue]
> [...]
> Knowing the width of my browser window means something, knowing the
> width of my desktop is useless in a browser.[/color]

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:[color=blue]
> Randy Webb wrote:
>[color=green]
> > [...]
> > Knowing the width of my browser window means something, knowing the
> > width of my desktop is useless in a browser.[/color]
>
> 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[/color]

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:[color=blue]
> Bart Van der Donck wrote:[color=green]
>> Randy Webb wrote:
>>[color=darkred]
>>> [...]
>>> Knowing the width of my browser window means something, knowing the
>>> width of my desktop is useless in a browser.[/color]
>>
>> 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[/color]
>
> You did? can you recall where is it? or at the very least what method
> did they use to resize the wallpaper dynamically?[/color]

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.

Dag Sunde wrote:[color=blue]
> Seige wrote:[color=green]
>> Bart Van der Donck wrote:[color=darkred]
>>> 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.[/color]
>> You did? can you recall where is it? or at the very least what method
>> did they use to resize the wallpaper dynamically?[/color]
> With "wallpaper" here, I am fairly sure we're talking about the
> background-image of the body element, and *not* the OS wallpaper...[/color]

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

Matt Kruse wrote:
[color=blue]
> [...]
> On the contrary, I think Bart was referring to OS wallpaper. Otherwise,
> screen resolution (rather than browser canvas size) would be irrelevant.[/color]

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

Matt Kruse wrote:[color=blue]
> Dag Sunde wrote:[color=green]
>> Seige wrote:[color=darkred]
>>> 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?[/color]
>> With "wallpaper" here, I am fairly sure we're talking about the
>> background-image of the body element, and *not* the OS wallpaper...[/color]
>
> On the contrary, I think Bart was referring to OS wallpaper.
> Otherwise, screen resolution (rather than browser canvas size) would
> be irrelevant.[/color]

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

:-\

--
Dag.

Bart Van der Donck said the following on 6/22/2006 5:42 AM:[color=blue]
> Randy Webb wrote:
>[color=green]
>> [...]
>> Knowing the width of my browser window means something, knowing the
>> width of my desktop is useless in a browser.[/color]
>
> Objection, Your Honour !
> E.g. I remember a js wallpaper script that offers the appropriate
> wallpaper size according to the user's screen resolution.[/color]

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/

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:[color=blue]
> Bart Van der Donck said the following on 6/22/2006 5:42 AM:[color=green]
> > Randy Webb wrote:
> >[color=darkred]
> >> [...]
> >> Knowing the width of my browser window means something, knowing the
> >> width of my desktop is useless in a browser.[/color]
> >
> > Objection, Your Honour !
> > E.g. I remember a js wallpaper script that offers the appropriate
> > wallpaper size according to the user's screen resolution.[/color]
>
> 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/[/color]

Seige wrote:[color=blue]
> 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...[/color]

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