Designing to fit large monitors

Topic

New Reply

I’m having problems designing images used as backgrounds to fit the 21″ – 25″ monitors.

When most screen resolutions were in the 800×600 or 1024×768 range, I never noticed any problems with the default tiling properties, but now the larger screens are repeating my 1024 x 768 images both horizontally and vertically. This becomes a difficulty, especially when I do any image-mapping with links.

How can I get a “universal” size that fits all monitors? This has become a critical issue for me with a couple of new clients’ web sites, and I would appreciate an emailed answer in addition to whatever interest this might generate in the Lounge.

Reply | Quote

Replies

The simple answer is that you can’t, since the common screen formats are 16:10 or 16:9 whereas they used to be (more or less) 4:3.
Have a look at this Wikipedia article on Display Resolution

You might find it useful (XP procedure) to right click on a blank area of desktop, and choose Properties. Select the Desktop tab and choose one of the pictures. Then observe the effect when you choose each of the three possible Positions: Center, Tile or Stretch. That’s what can get done to your carefully-crafted picture…

BATcher

Plethora means a lot to me.

Reply | Quote

I’m having problems designing images used as backgrounds to fit the 21″ – 25″ monitors.

When most screen resolutions were in the 800×600 or 1024×768 range, I never noticed any problems with the default tiling properties, but now the larger screens are repeating my 1024 x 768 images both horizontally and vertically. This becomes a difficulty, especially when I do any image-mapping with links.

How can I get a “universal” size that fits all monitors?

The CSS specification is being revised to add background image scaling, but this is not yet implemented across the popular browsers.

References:
CSS3: http://www.w3.org/TR/css3-background/#the-background-size
Mozilla: https://developer.mozilla.org/en/CSS/-moz-background-size

Until then, I think you are a bit stuck using fixed size images on a complementary background color.

Reply | Quote

There’s another problem with using background images that large: download time and bandwidth usage. A work-around for that can be found in html5 Canvas: program the background image as a javascript procedure. Quick, small in download size, and works in most browsers. Drawback: requires javascript.

Reply | Quote

If you want to stop the background image from tiling you can use “no-repeat” property in your background style. That is, if you use css in your design. Also, with repeat-x or repeat-y you can control your background horizontal or vertical tiling respectively.

So far this too is just another workaround until the newer html5 specifications spread a bit wider.

Reply | Quote