Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
Does anyone know if you can change the size of a background image in HTML?. I want a background picture to be 100% height and width regardless of screen resolution etc.
Thanks for any help that can be given

Not that simple. If you were using Flash, you could do this, but it would be very annoying. Otherwise, the nearest way is not too easy (read the resolution, and fetch a picture formated to the correct size - using PHP, ASP, or JSP with some CSS). You could also use a PHP graphic library and dynamically alter the image to a new height and width. There is probably something very ugly you could do with Javascript as well.
If you need the effect, create your site around one resolution (safely being 800x600). Remember that in web design, compromise is the real game. There are lots of effects you would like, but in the real world, getting your information and content across is what matters. More importantly, often times you find a better or more creative method of presentation by not being able to do what you initially conceived. Walls have a powerful dynamic of making you work better with the space between them.

Hmm, yes i thought as much.
You can change image attachment position and repeat but not size seems odd to me but still life goes on. Thanks for taking the time to reply anyway

well, just make the image very large dimensions when you create it, big enough to fit the largest screen sizes you want to accomodate. Then just use javascript to resize it to the size you need (image_variable.height=xxx;image_variable.width=xxx; you might need to use php to create variables on the web page that contain the actual dimensions of the image). It will take longer to download the background image but it should look good on both large and small screen resolutions. I am not positive you can change the dimensions of the background image with javascript but I asume you can. If not you could always display it as a normal image and then set it's z-order to a lower number than all other images on the page (img style="position:absolute;z-order:0;"). I hope this is what you meant.

Ummmmm... Could you talk me through this a little bit please i am only relatively new to javascript. I do however understand the
(img style="position:absolute;z-order:0;")
(about the only part i understood, silly me!!)

"There is probably something very ugly you could do with Javascript as well." - I'd say geohoffman's suggestion fits the bill quite nicely:-) I am not sure if you can change the (display) size of a background picture dynamically either...Anyhow, here's another ugly javascript solution.
Bottom line, there is no easy way to do this that isn't more annoying than having the background image not fit the screen...But if my hand was forced, I'd take a mix of anonproxy's and geohoffman's approaches...
Create several background images, perhaps one 640 wide, another 800, 1024, and so on. Then use a javascript to read in the screen width and choose an appropriate image.
if (window.screen.width <= 640)
{
document.style.background-image="images/bg640.jpg";
}
else if (window.screen.width <= 800)
{
document.style.background-image="images/bg800.jpg;
}
else if (window.screen.width <= 1024)
{
document.style.background-image="images/bg1024.jpg";
}
else
{
document.style.background-image="images/bghuge.jpg";
}I have not tested the above, but with some minor modification it should work. I don't know which browsers support window.screen.width, but supposedly ie5.5, 6, and moz 1 do.
This way you don't have to do any server-side scripting, and users don't have to download obscenely huge pictures for small resolutions. The costs are server space, crowding your neat directory, and using javascript (which isn't always turned on, so make the necessary adjustments to make something nice happen if it is off.)
-SN

![]() |
![]() |
![]() |

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |