Background resizable depending on screen resolution

doRodrigo
doRodrigo used Ask the Experts™
on
Hi folks I need to make a website as friendly as possible concerning browser and screen resolution, and I found a site that used someway to re-size the image used on the background depending on the size of the window opened or the screen resolution, but after a little time wondering how to make it I decided to post it here as a question. Any help would be appreciated.

Cheers!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
hi there, what kind of a background image are you planning to use ?

if you will be using a small bg image as a pattern I would recommend using background-repeat:repeat-x/repeat-y/no-repeat/repeat; property of css.

using a resizeable background image wouldn't be very efficient since either you have to have a huge bg image like 400-500 kb (which can dramatically decrease page load speed ) or the resolution of the image would be bad on high res.

still if you are looking to resize the image, you can use .net or php to a page that resizes the image and returns you the response as an image.

example:

.bg
{
background-image:url(GenerateImage.aspx?width=[PageWidth]&height=[PageHeight]);
}

Open in new window


keep in mind that this would cause huge (really huge) amount of cpu usage.
Top Expert 2011
Commented:
Are you looking for something like this? http://johnpatrickgiven.com/jquery/background-resize/ 

I've used this and recommended it several times. Great plugin and seems to work very well cross-browser.
doRodrigoLecturer

Author

Commented:
Yep, that's it. Cheers!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial