Set background image according to screen resolution

Question

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equal to 1200*600 then background = mybackground.jpg no-repeat or else. How can I do this?

Answer 1

A pure CSS version that works very well is discussed here, two techniques are examined and I personally prefer technique #2.

Another method used by Last.fm is to use jQuery to detect resolution changes and adjust the image size accordingly.

This article covers the technique with a live demo.

Answer 2

Hi heres a javascript version which changes the background image src according to screen resolution. You have to have the different images saved in the right size.

Javascript Change Div Background Image

body { margin:0; width:100%; height:100%; }

div1 {

background-image:url('sky.jpg');
width:100%
height:100%

}

p {
font-family:Verdana;
font-weight:bold;
font-size:11px;
}

function changeDivImage() { //change the image path to a string var imgPath = new String(); imgPath = document.getElementById("div1").style.backgroundImage; //get screen res of customer var custHeight=screen.height; var custWidth=screen.width; //if their screen width is less than or equal to 640 then use the 640 pic url if (custWidth

This Javascript Example will change the background image of
HTML Div Tag onload using javascript screen resolution.

paragraph