Moving Background Image diagonally across the screen

Question

I'm new here, so I can't comment/follow-up yet on another question that PARTIALLY provided an answer for what I'm trying to achieve.

On this question here [Moving Background image in a loop from left to right the fantastic and very detailed answer by Jack Pattishall Jr lets me set the page background to scroll either vertically OR horizontally.

Is there any way to combine the directional code, so that the page background scrolls diagonally (i.e. bottom left to top right)?
I've been "mutilating" Jack's code for days now, but can't figure out how to make the background scroll in 2 directions simultaneously. :-(

this would help you get started http://jsfiddle.net/Lb44p/1/ — King King, Jun 09 '14 at 16:48

score 2 · Answer 1 · answered Jun 09 '14 at 16:50

2

http://jsfiddle.net/f5WjJ/2/

updates the fiddle from Jack Pattishall Jr to update both x AND y parameters. Also set the repeat CSS to both x AND y as well.

$(function(){
    var x = 0;
    var y = 0;//here
    setInterval(function(){
        x+=1;
        y-=1;//here
        $('body').css('background-position', x + 'px ' + y + 'px');//here too
    }, 10);
})


background-repeat: repeat;/*and also here*/

answered Jun 09 '14 at 16:50

KnightHawk

901
9
18

what is `repeat-both`? we only have `repeat` (which means repeating both x and y), also that is the default value so you don't have to add anything. – King King Jun 09 '14 at 16:53

score 1 · Accepted Answer · edited May 23 '17 at 11:55

Starting from the example mentioned above, here are my changes:

html, body { height: 100%; width: 100%;}
body {
    background-image: url('http://coloradoellie.files.wordpress.com/2013/10/25280-ginger-kitten-leaping-with-arms-outstretched-white-background.jpg?w=300&h=222');
    background-repeat: repeat-x repeat-y; // this line could be removed entirely
}

$(function(){
     var x = 0;
     var y = 0;
     setInterval(function(){
         x+=1;
         y-=1;
         $('body').css('background-position', x + 'px ' + y + 'px');
     }, 10);
 })

Brief description of changes:

Add repeat-y to background-repeat or remove the line (we have replicated the default behavior)
Instantiate and initialize a y-position variable
Move additively on the x-axis and negatively on the y-axis to get the background to move in the desired direction
Edit the $('body') css to include the new non-static y-position

Thanks for the advice, Joseph Neathawk

this doesn't make the image move from bottom left to top right like the OP asked. This makes it go from bottom right to top left. You need separate values for x and y. — KnightHawk, Jun 09 '14 at 17:01

Moving Background Image diagonally across the screen

2 Answers2