Can an HTML background be moved with jQuery's animate?

Question

On my webpage, I have the background image set with CSS, using the HTML selector. The background image is basically like a blueprint schematic background. (i.e. A white grid on a blue background.)

CSS:

html
{
    display: block;
    position: absolute;
    background: url(../assets/background.jpg) repeat;
    color: #FFF;
    margin: 0px;
    padding: 0px;
    border: none;
}

When the end user clicks a button, I want the background image mentioned above to slide off the screen, towards the top-right direction, making the page appear to be going to a different area on the large blueprint schematic. I am using jQuery, but I cannot figure out how to access the background image from the CSS.

JavaScript:

$("#button").click(function()
{
    // Animate the webpage's background, causing it to move
    $("html /* Not sure what goes here */").animate({left: "-=10000px", top: "-=5000px"}, 1250);
});

I have tried using a div in the body that matches the width and height of the end user's screen, but a thick, white border appears around the blueprint schematic image, so I guess I will have to stick with adding the image through CSS, on the HTML selector.

How do I achieve the effect that I desire?

https://jsfiddle.net/zaevzm5p/

possible duplicate of [Animate background image change with jQuery](http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery) — ketan, Feb 16 '15 at 09:22
do you want to animate the background position or the html dom position? because last thing will be difficult to do! — Alex, Feb 16 '15 at 09:23
I want to animate the background image's position, not the entire DOM. I think the latter would not allow my visitors to see anything :P Sorry for the duplicate question - I searched for ages for a related question. — HuskyBlue, Feb 16 '15 at 09:27

score 6 · Accepted Answer · answered Feb 16 '15 at 09:24

Working Fiddle

Don't animate the complete HTML as it will animate your whole website so I created a div with the background you wanted instead of setting the background of HTML.

HTML

<body>
    <div id="div1"></div>
    <button id="button">Click Me</button>
</body>

CSS

#div1 {
    position: absolute;
    background: url(http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg) repeat;
    top:0; left:0; height:100%; width:100%;
    /* I want *only* this background image to move on the button click */
    color: #FFF;
    margin: 0px;
    padding: 0px;
    border: none;
    z-index:-1;
}

jQuery

$("#button").click(function () {
    // Animate the webpage's background, causing it to move
    $("#div1").animate({
        left: "-=10000px",
        top: "-=5000px"
    }, 1250);
});

Nothing like that :), If it solves your problem please consider voting it up and marking it as correct answer. — void, Feb 16 '15 at 09:31

score 2 · Answer 2 · answered Feb 16 '15 at 09:27

2

I use a div instead of the html itself,try this

solution 1

    $("#button").click(function () {
    // Animate the webpage's background, causing it to move
    $("#div1").animate({
        left: "-=10000px",
        top: "-=5000px"
    }, 1250);
});

answered Feb 16 '15 at 09:27

Carlo G.

162
12

Thank you for the contribution. Void beat you to the working solution :) – HuskyBlue Feb 16 '15 at 09:35
1

it has been a pleasure! :) – Carlo G. Feb 16 '15 at 09:38

score 1 · Answer 3 · answered Feb 16 '15 at 09:32

1

It can be achieved with CSS transitions too:

Fiddle Example

Less JS, plus CSS

-webkit-transition: 1.25s ease-in-out;
-moz-transition: 1.25s ease-in-out;
-o-transition: 1.25s ease-in-out;
transition: 1.25s ease-in-out;

answered Feb 16 '15 at 09:32

ala_747

611
4
10

score 0 · Answer 4 · answered Feb 16 '15 at 09:27

0

You could create a div as in void's answer and just animate it's position.

The best and easiest solution would be to use css3 (just google it).

To provide a solution to your original question, you can (if the browser supports it), animate the background position like so:

$("#button").click(function () {
    // Animate the webpage's background, causing it to move
    $("html /* Not sure what goes here */").animate({
        'background-position-x': "100px",
        'background-position-y': "100px"
    }, 1250);
});

But this is not best practice.

Working fiddle

answered Feb 16 '15 at 09:27

Alex

9,911
5
33
52

Thank you for your advice and help! Void beat you to the working solution, though :) – HuskyBlue Feb 16 '15 at 09:36
youre welcome! it has nothing to do with beating though, I just wanted to provide an answer to your original question - can you animate `html`'s background position, and you can :) either with my code or even with css3. a nice solution is to not apply the background to the `html` element directly but create another div, absolutely – Alex Feb 16 '15 at 09:38

Can an HTML background be moved with jQuery's animate?

4 Answers4