Scalability

[Kalash]

Hi there, new to the forum, hoping to become more involved as I become more experienced with web design.

Currently, I am working on a school project, and one thing has been bugging me for a very long time. Throughout several websites, I see the use of a background image (say a photo, or just a subtle design).

Whenever I try this on my website with a resolution of 1024 x 768 (or 800 x 600), the image turns out to be a centered block (and I assume this is because my personal resolution is 1280 x 1024).

I am unsure as to how to scale my website to browser size.

Any help provided on this issue is much appreciated.

[Wickham]

Background-images cannot normally be scaled. If you have a background-image in the body style you can center it but then a bit is cut off both sides in viewports that are less wide than the background-image or a space shows both sides in larger resolutions. Same thing happens if used as a background-image in a div.

You can make an image scale to the viewport resolution by making it position: fixed and tied to the left and right sides so that it gets smaller or larger according to the resolution. See
http://www.wickham43.supanet.com/tutorial/backgroundfullwidthflexible.html
and drag the window wider and narrower.

As far as the content of your website is concerned, if you want that to scale to the resolution; use % for all widths for divs, tables, images, margins and padding, totalling 100% (or a bit less if you have side borders as borders cannot be sized in %). This requires practice as content will get squashed up in small resolutions like mobile phones or seem too spaced out in large resolutions. You can use min-width and max-width for modern browsers but as these do not work in IE6 you should use fixed widths for IE6 in a conditional comment only operated by IE6 and min and max-widths for modern browsers.