Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Create Animated Background Using CSS3

Thursday, Sep 28, 2017

Tags:- CSS3 HTML


In this tutorial we will show you how to create animated background using CSS3.Whenever user opens the webpage the background image of a webpage scrolls from right to left it looks very beautiful it gave moving effect to the user.You may also like change background with animation using CSS3.


See Demo
Animated Background Using CSS3


To Create Animated Background It Takes Only One Step:-

  1. Make a HTML file and define markup and styling


Step 1.Make a HTML file and define markup and styling

We make a HTML file and save it with a name animate.html

<html>
<head>
<style>
body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:100%;
}
#animated_div
{
width: 100%;
height: 100%;
background: url(images/animated_background.jpg) repeat-x;
background-size:cover;
-webkit-animation: animatebackground 60s linear infinite;
animation: animatebackground 60s linear infinite;
-ms-animation: animatebackground 60s linear infinite;
-moz-animation: animatebackground 60s linear infinite;
}
@keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-webkit-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-ms-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
@-moz-keyframes animatebackground 
{
 from {background-position: 0 0;}
 to {background-position: -1000px 0;}
}
#animated_div h1
{
 color:white;
 padding-top:100px;
 font-size:50px;
}
#animated_div h1 p
{
 font-size:20px;
}
</style>
</head>
<body>
<div id="wrapper">
 <div id="animated_div">
  <h1>Animated Background Using CSS3</h1>
 </div>
</div>
</body>
</html>

In this step create a div which is animated div which scrolls from right to left.In our CSS we set background image to animated div and then use CSS3 animaton to scroll the div from right to left and then we use CSS3 keyframes and set the movement from 0 to -1000px so that the images first move to -1000px then start again you can use any number but it is recommended to use higher number to avoid quick restart.You may also like move elements on page scroll using jQuery.


Thats all, this is how to create animated background using CSS3 and HTML.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.