morty Posted April 12, 2010 Report Share Posted April 12, 2010 I've gotten my site up and running, but have a question about background images. I want to insert a single background image. That is, I don't want it to wallpaper. I just want a single image covering the entire screen area. Would appreciate knowing how to do this. Mort P. Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 12, 2010 Report Share Posted April 12, 2010 Background images can't stretch, so making an image fit any screen resolution is impossible using a background image. You can make an image suitable for most resolutions, say 1024px, 1152px or 1280px wide, and make the background color the same as the edges of the image as far as is possible so that viewers with a larger resolution than the image width will see more or less the same color at the sides and below. Viewers with a smaller resolution will see the sides cut off equally if you center the background image. You can make a normal image operate like a background image and it can then stretch to fit any resolution. See http://www.wickham43.net/backgroundfullwidthflexible.html and drag the window smaller and bigger to see the effect. If you don't specify a height, the height will adjust in proportion but at small window widths there will probably be a space under the image. The image is fixed to the sides with width: 100%, left: 0; right: 0; and can be position: fixed or position: absolute; and has z-index: -1; so that all page content shows on top. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.