1 reply [Last post]
mottwsc's picture
Last seen: 7 years 12 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: 17 hours 55 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849


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.