473,698 Members | 2,185 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 48981
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
2940
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
1166
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
51392
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 resol. then it atomatically resized to full screen without having any scroll on browser.
5
6201
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 pixel in the cells it takes up the entire cell size (ideally it should as the cell size is also 24 X...
0
2178
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 bottom. I would like the edited transaction to appear in the table instead. I know that a...
0
1887
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 bottom. I would like the edited transaction to appear in the table instead. I know that a JavaScript...
9
3901
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
3057
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 resolution to lower or higher the css alignment is not proper. Please find the css, html and jquery...
1
1403
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 a div for each. Okay...so far, I've been able to make it all work. Here's where I'm getting stuck:...
0
8598
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9152
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9014
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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8855
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7708
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6515
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5857
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3037
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
2
2320
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.