Clever Geek Handbook

Magnifying effect on the background of the body

I want my body's background image to grow on page load. Below 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 am trying to change a property of an background-size

image on page load. but it doesn't work. What am I doing wrong?

+3


source to share


6 answers


All you need is a jsFiddle

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 keyframe animation animateBg (and whatever else you need). If you don’t know the transitions .



Don't forget to take a short time and read about CSS Animations , it comes in handy to be able to use CSS first when choosing between jQuery and CSS.

Let me know if this works for you, otherwise we can improve on the improved answer that works for you :)

+3


source


Hope this resolves your request

Simple animation playback jquery 



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

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

+2


source


try

$("body").animate({
    "background-size", "140%"
},20000, function() { alert(); });

see example background zoom effect

+1


source


here it is the JQuery function for your code. With delay and callback

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("called");
    });

      });
+1


source


Why don't you do this scaling effect inside the css? 

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


source


@sooraj just sets the height and width as a demo

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

        
        
        
      

    
body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(//images.visitcanberra.com.au/images/canberra_hero_image.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   
        height:500px;
    width:100%;

}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>
Run codeHide result


-1


source






More articles:


All Articles