How To Create Animated Footer Background

[Yukki 27]

This is really cool to just add some copyrights inside the footer with a little snow falling or anything else in background

HTML > Add this to footer which you can find in globalTemplate mostly

<footer id="sticky">&copy&nbspFooter Works, LLC - 2016</footer>

Add The CSS Now> In custom.css

body {
  margin:0; /*gets rid of white space around body*/
  height:200vh;
  background:url("https://www.website/Image/Snow411.gif") no-repeat center / contain;
  background-color:#eee;
  position:relative; /*REQUIRED Sets up positioning for your footer*/
}

#sticky {
  width:100%;
  padding:10px;
  padding-bottom:10px;
  background:black;
  color:white;
  font-weight:bold;
  font-size:10px;
  text-align:center;
  position:fixed;    /*Here's what sticks it*/
  bottom:0;          /*to the bottom of the body*/
  left:0;            /*and to the left of the body.*/
  
  /*EFFECTS*/
  border-top:1px solid whitesmoke;
  background-image:url("https://www.website/Image/Snow411.gif")
}

Make sure you save the background image and upload it to your server so you don't get https issue + you can also use the image hosting websites to host your image files e.g ImgBB

Try it yourself or use the codepen site to check its working or not, still i can say that its working smooth on my side

[Waqas Dar 7,036]

nice