473,545 Members | 529 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.create Element("bgimg" );
bgimg.src = "/images/bg.jpg";
st = {
position:"absol ute",
zIndex:"-10",
width:screen.wi dth,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.a ppendChild(bgim g);

Jun 19 '06 #1
14 48958
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.create Element("bgimg" );
bgimg.src = "/images/bg.jpg";
st = {
position:"absol ute",
zIndex:"-10",
width:screen.wi dth,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.a ppendChild(bgim g);


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.javas cript 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.clientWi dth?screen.clie ntwidth: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.create Element("bgimg" );
bgimg.src = "/images/bg.jpg";
st = {
position:"absol ute",
zIndex:"-10",
width:screen.wi dth,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.a ppendChild(bgim g);


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.javas cript 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.create Element("bgimg" );
bgimg.src = "/images/bg.jpg";
st = {
position:"absol ute",
zIndex:"-10",
width:screen.wi dth,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.a ppendChild(bgim g);
</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.create Element("bgimg" );
bgimg.src = "/images/bg.jpg";
st = {
position:"absol ute",
zIndex:"-10",
width:screen.wi dth,
top:"0",
left:"0"
}
for( s in st ){
img.style[s] = st[s];
}
document.body.a ppendChild(bgim g);
</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.clientWi dth?screen.clie ntwidth: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.javas cript 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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2936
by: Mustufa Baig | last post by:
Can anybody tell me how or refer me a link where I can find the client side javascript to make the positions and resizing of the controls on .aspx page independent of screen resolution. As I am using Grid layout and it uses pixel units. Thanks.
3
1151
by: Franck | last post by:
Hello, In asp .net is there any way of resizing the component second the screen resolution? If not is there any workaround? thank you Franck
7
51378
by: mukeshgupta.WD | last post by:
Hi, i have seen in many web sites, the size of pages are automatically resized according to screen resolution. generally we create web layout for 800x600 but if we view it in1024x768 then the page open have wide space on right. Is there any kind of coding to overcome this situation.like when we wiew the page created in 800x600 in 1024x768...
5
6184
by: Maxi | last post by:
I have a 30X16 cells table in my html page. Table height and width are set to 100%. I have set size of every cell inside the table to 24 pixel. When I open the html page in maximize state in either resolution 800 X 600 or 1152 X 864 it takes up the entire explorer size. In screen resolution 800 X 600, if I insert a pictures of 24 X 24...
0
2165
by: Keith | last post by:
I have a web form that contains a repeater control that is designed to ask like a check book register. Clicking on a certain transaction takes the user to a different .aspx page where it can be edited and then saved. Currently, after saving the edited transaction and returning to the check register, the repeater control table returns to the...
0
1877
by: Keith | last post by:
I have a web form that contains a repeater control that is designed to ask like a check book register. Clicking on a certain transaction takes the user to a different .aspx page where it can be edited and then saved. Currently, after saving the edited transaction and returning to the check register, the repeater control table returns to the...
9
3890
by: Steve Wright | last post by:
Hi I'm developing a webpage that needs to include a different stylesheet depending on the screen resolution. I know that I could read the resolution in javascript and then do some sort of stylesheet switcher as part of the onload event but I would rather link in the correct stylesheet for the resolution in the first place.
2
3052
by: nataraj jaideep | last post by:
Hi, I created a textsizer in css and jquery. The purpose of this is, 1. on webpage there is a link called "textsize", when you click a popup is shown and it contains 3 options (increase font, decrease font and reset font). I had aligned my pop up box according to the screen resolution 1024 X 768, when i change the screen or system...
1
1399
by: John Thomson | last post by:
Hi, I'm a little new to javascript, and I'd really appreciate some help. Basically, what I'm looking for, is a way to have 3 iframes lined up side by side on my page. I'd like all three to be width 33% of my page so that, side by side, they fill up the whole width of the page. I'd like to be able to show/hide each of the frames with a button or...
0
7805
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7416
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5969
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5325
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4944
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3449
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3441
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1878
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
701
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.