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.
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.