Get a free trial // Grow your CSS skills // Land your dream job

Changeable Background Image

  • # November 9, 2008 at 12:04 am


    I’m wondering if it would be possible to have the background image change when the user clicks a link. (Nothing else, just the background)

    The best example I can find is here: (click on the little square, top right, underneath where it says "shop") — however I do not need a pop down menu. I was hoping to just have a few small thumbnails floating at the top of the page of different backgrounds.

    Thank you! Sorry if this is a stupid question, I’m new to all of this!


    # November 9, 2008 at 7:51 am

    Try using jQuery, Chris has a tutorial on the basics here and a second here

    The jQuery website also has lots of tutorials (just search jQuery)
    I hope that helps

    # November 9, 2008 at 9:36 am

    Jquery is a good bet. In your html put:

    And the Jquery to change the background:

    $(document).ready(function() {

    $(‘body’).css({ backgroundImage : “url(images/bg1.jpg)” });
    $(‘body’).css({ backgroundImage : “url(images/bg2.jpg)” });
    $(‘body’).css({ backgroundImage : “url(images/bg3.jpg)” });

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed