different backgrounds for different resolutions, is this possible?

I’m wanting to show a different background on my site, depending on the resolution of the browser.. Is this even possible?

Why do you want to do that? There may be a better solution to whatever problem you’re trying to solve.

This works by the way, but I’d be very surprised if there wasn’t a better way of accomplishing whatever you’re trying to accomplish.

Can be done with javascript.

Here’s an example of changing stylesheets with jquery depending on the resolution:

If you just want to change the background image and nothing else then you can just alter that single css property like so:

$(body).css('background-image','url(bg1.png)')

If you’re not using jquery:

<script type="text/javascript">
    if (screen.width > 800)
        document.body.style.backgroundImage = "bg.png";
    else
        document.body.style.backgroundImage = "bg2.png";
</script>

OR you can create a class for each body and switch it like so:

document.body.className = 'class1'

$(body).css('background-image','url(bg1.png)')

<script type="text/javascript">
    if (screen.width > 800)
        document.body.style.backgroundImage = "bg.png";
    else
        document.body.style.backgroundImage = "bg2.png";
</script>

document.body.className = 'class1'