Grow your CSS skills. Land your dream job.

Changeable Background Image

  • # November 9, 2008 at 12:04 am

    Hi,

    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: http://www.isaacmizrahiny.com/ (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!

    -Sophie

    http://www.sophieshepherd.com

    # 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:

    Code:
    $(document).ready(function() {

    $(“a#style1″).click(function(){
    $(‘body’).css({ backgroundImage : “url(images/bg1.jpg)” });
    });
    $(“a#style2″).click(function(){
    $(‘body’).css({ backgroundImage : “url(images/bg2.jpg)” });
    });
    $(“a#style3″).click(function(){
    $(‘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.

*May or may not contain any actual "CSS" or "Tricks".