[plaxx]

Hey,

What is the best way of adding a background image and making it scalable, so it re-sizes with the correct aspect ratio (so the image doesn't distort).

Thanks,
M

[Rotuy]

Just make it a set size and fade it into the background colour. This way it looks good on high AND low resolutions, but depending on the size varies the amount of the image being shown.

[plaxx]

Originally Posted by Rotuy

Just make it a set size and fade it into the background colour. This way it looks good on high AND low resolutions, but depending on the size varies the amount of the image being shown.

Thanks for the reply.

I've used that technique for several projects in the past, but this one needs to have a full background image, which re-sizes dynamically depending on the size of the browser.

One solution I'm looking into is overlaying HTML on top of a SWF file, which will have the image. That SWF file will be scaled to fit the browser window proportionately.

[herkalees]

This might get you close to your goal; view the source: stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation

[plaxx]

Originally Posted by herkalees

This might get you close to your goal; view the source:

Thanks for the reply.

I took a look at it, and it just might work. I just wish CSS3 or HTML5 would do something about this, seeing as how its become something regularly want to do, but have to resort to hack-ish ways of doing it, and still not getting good results.

My only issue with Stu's technique is that the image distorts when you re-size, and on widescreen monitor it's distorted to begin with.

Thanks for the link.