Zoom in effect on body background

Question

I want the background image of my body to zoom in on page load. The following is the code i have.

CSS:

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   

}

JQuery:

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

I'm trying to change the background-size property of the image on page load. but this is not working. What am i doing wrong?

Answer 1

All you need is:

html, body {
    background: url("http://placehold.it/200x200") top center no-repeat;
    animation: animateBg forwards 2s ease-in;
}
@keyframes animateBg{
    from { background-size: 200px; }
    to { background-size: 100%; }
}

Note: the image is just a placeholder, you can change it as well as the background-size property of the animateBg keyframe animation (and anything else you need). In case you are not aware of forwards.

Make sure to take a short while and read about CSS Animations, very convenient to be able to leverage CSS first when choosing between jQuery and CSS.

Let me know if this works for you, otherwise we can work on an improved answer that suits you better :)

Answer 2

Hope this will resolve your query

Just a simple jquery animation play

$("body").animate({
    "background-size" : "180px"
},2000);

Try this for live demo http://jsfiddle.net/g2ef7gc4/25/