Computing.Net > Forums > Programming > Background image in HTML

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

Background image in HTML

Reply to Message Icon

Name: abc123456789
Date: November 29, 2003 at 00:06:21 Pacific
OS: Win 98
CPU/Ram: AMD k6II 450mhz/128mb
Comment:

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



Sponsored Link
Ads by Google

Response Number 1
Name: anonproxy
Date: November 29, 2003 at 00:52:24 Pacific
Reply:

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.


0

Response Number 2
Name: abc123456789
Date: November 29, 2003 at 12:21:30 Pacific
Reply:

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


0

Response Number 3
Name: geohoffman
Date: November 29, 2003 at 23:51:58 Pacific
Reply:

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.


0

Response Number 4
Name: abc123456789
Date: December 1, 2003 at 21:03:13 Pacific
Reply:

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


0

Response Number 5
Name: SN
Date: December 3, 2003 at 10:28:18 Pacific
Reply:

"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


0

Related Posts

See More



Sponsored Link
Ads by Google
Reply to Message Icon






Post Locked

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


Go to Programming Forum Home


Sponsored links

Ads by Google


Results for: Background image in HTML

Center A Background in HTML? www.computing.net/answers/programming/center-a-background-in-html/3400.html

background image in stylesheet www.computing.net/answers/programming/background-image-in-stylesheet/6823.html

Background in HTML www.computing.net/answers/programming/background-in-html/6586.html