1 reply [Last post]
mottwsc's picture
Last seen: 8 years 52 weeks ago
Timezone: GMT-4
Joined: 2010-05-19
Posts: 2
Points: 4

I am trying to use a background graphic for a web page. The background graphic shows a menu bar at the top and the bottom and some graphics at the left amd right sides. Right now, the graphic doesn't come to the bottom of the screen, so I need to change the aspect ratio of the graphic. I am trying to determine the correct aspect ratio so that it properly fills the screen on various screens (tablet vs. laptop vs. large monitor.

How, without experimenting too much, determine the right dimensions of the graphic?

Do I need different graphics for different screen sizes? Hopefully not.

Any guidance would be appreciated.

gary.turner's picture
Last seen: 1 year 17 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858


Have you studied §3.9. Sizing Images: the ‘background-size’ property? This css3 module has good support. Older browsers (esp. IE<9) may not support background-sizing, but users of older browsers will expect certain shortcomings. Firefox, Safari/Chrome and Opera will require vendor prefixed properties, -moz-, -webkit-, and -o- respectively. See Color and Background support.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.