469,280 Members | 2,180 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,280 developers. It's quick & easy.

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

Jun 19 '06 #1
14 48638
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/
Jun 19 '06 #2
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/


Jun 20 '06 #3
"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.
Jun 20 '06 #4
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.


Jun 20 '06 #5
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/
Jun 21 '06 #6
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

Jun 22 '06 #7

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?

Jun 22 '06 #8
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.
Jun 22 '06 #9
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
Jun 22 '06 #10
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

Jun 22 '06 #11
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.
Jun 22 '06 #12
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/
Jun 22 '06 #13
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/


Jun 23 '06 #14
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
Jun 23 '06 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Mustufa Baig | last post: by
3 posts views Thread by Franck | last post: by
7 posts views Thread by mukeshgupta.WD | last post: by
5 posts views Thread by Maxi | last post: by
9 posts views Thread by Steve Wright | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.