The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Animate background-image with jQuery?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #22844

    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!!!


    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


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

    So for example;

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



    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)
  • The forum ‘Other’ is closed to new topics and replies.