Setting Background Image For Body Element In Xhtml (for Different Monitors And Resolutions)

I am so confused about background image in body element. What is the best way for setting a background image for the body element in xhtml (for different monitors and resolutions)?

Solution 1:

I think you want to resize your background so it stretches and and always shows fullscreen. If that is the case, you can use supersize: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

Hope this helps you

Solution 2:

The most common practice is to design a larger image, considering that the most relevant area is the 1024 wide center area, and the rest is just to fill the page when the user is using larger resolutions. As Marcel Korpel wrote, use the background-position property in css to apply align center.

Solution 3:

It sounds like you need to not only use css to place the background-image, but also then to size the containing div to match your expectations.

body {
    background: url(path/to/image) no-repeat center center;
    width: 1024px;
    height: 768px;
}

Solution 4:

Up to version 3.1 in css you can use the calc function. With this you could calculate the "correct" filename of the background image fitting the individual monitor size and resolution.