Jump to content

Background Images


morty

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...