• htl
    # June 28, 2008 at 2:27 am

    Hi all, I’m pleased to join CSS-Tricks with all of you. I wonder how I can animate the background-image of an element with jQuery. I have been trying to do that by using the animate function of jQuery but it didn’t work so well :cry:
    Here is my snippet of code:

    #wrapper {
    width: 800px;
    height: 600px;
    position: relative;
    background: #92C87A url(“background.jpg”) -400px -200px no-repeat;
    margin: 0 auto;


    backgroundImage: “background.jpg”,
    backgroundPosition: “0px -400px”,
    backgroundRepeat: “no-repeat”
    }, 1000 );

    I want the background to move cross the monitor, but actually it suddenly appeared at -400px -400px position and began to move from this to -400px -200px position.
    Please help me with this problem.
    Thank you very much!!!

    # June 30, 2008 at 4:40 am

    Hi toby,
    Thank you very much! I have tried your solution anh it worked perfectly. I was a bit confused at first time because I hadn’t downloaded the code in the link you had given :mrgreen: .
    Again, thank you very much :D
    PS: This works on Firefox and Opera but have nothing to do with IE6. I should say it’s too cool for IE :P

    # July 31, 2008 at 5:19 am

    Is there a similar plugin available for using .animate with backgroundImage?

    So for example;

    function fadeImage(){ $(this).animate({backgroundImage: "image.jpg"}, 600);}


    # October 3, 2008 at 10:12 pm

    is the easing plugin necessary if i just want to animate the background image by just switching it? no fade,puff,slide etc necessary just a timed like background image switcher? i cant seem to find this info anywhere,thanks in advance!

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

You must be logged in to reply to this topic.