How To Keep Scrolling A DIV Background Image Using CSS3?

Like in the new era of designing every designer is adding some animation to there website. There are many ways to add animation like GIF image, SWF flash files, Movie Clips but all of these are too heavy that will effect on your SEO that is bad. But still animation catches every eyes so its also important too. Now as we shared a JavaScript code that is doing the same in last post but many thinks that JavaScript will make there site heavy but it will not as it is only 4-5 lines codes however it will not work without JavaScript browsers or JavaScript blocker extension browsers. Now if you want to work everywhere then you have to come in new era and have to use CSS3 Now if you will talk about CSS3 animation then your visitor must use CSS3 that near every new browser is supporting so now proceed with CSS3 codes that will help you to animate your DIV background and that will look amazing.

DEMO is Here

Scrolling A DIV Background Image Using CSS3?

Beautiful Keep Scrolling A DIV Background Image Using CSSS3 is by Tricky-Books ( www.tricky-books.com )

Features: 

• Pure CSS3 Code.
• No Extra HTML Codes.
• Single DIV Required.
• Cross Browser.
• Fully Customizeable.
• Scroll Background Image From Top To Bottom.
• Short And Simple Code.
• Easy To Add And Use.
• 101% Smooth Scrolling.
• Work On Any Platform.

How To Do It?

There are only three codes used in this snippet. HTML, CSS3 and 99.99% browsers and platform support it. So just add this code where you want to show it. But you have to keep something in your mind. CSS codes should be before your DIV code otherwise it will not work.

<style type="text/css">
#sliding_background {
background-image:url('https://lh3.googleusercontent.com/HcXmYZuvB1PBamzRBbNxf4LJEoAzTYWjEWSyxJAz-w=w672-h357-no');
width:800px;
height:300px;
color:#FFFFFF;
overflow:hidden;
padding:10px;
animation: mymove 5s linear infinite;
-webkit-animation: mymove 5s linear infinite;
-moz-animation: mymove 5s linear infinite;
-o-animation: mymove 5s linear infinite;
-ms-animation: mymove 5s linear infinite;
}
@keyframes mymove {
 0% { background-position: 0 0;
}
100% {
 background-position: 0 860px;
 }
 }
@-webkit-keyframes mymove
{
0% {
 background-position: 0 0; }
 100% {
 background-position: 0 860px; }
 } @-moz-keyframes mymove {
0% {
background-position: 0 0; }
 100% {
background-position: 0 860px;
}
 }
 @-o-keyframes mymove {
 0% {
background-position: 0 0;
 }
 100% {
 background-position: 0 860px;
}
}
 @-ms-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
 }
</style> <div id="sliding_background"> <h1>Scrolling Background Of A DIV By CSS </h1> Beautiful Scrolling Backgroud by Tricky-Books ( www.tricky-books.com ) </div>

Customization:

1.) Change https://lh3.googleusercontent.com/HcXmYZuvB1PBamzRBbNxf4LJEoAzTYWjEWSyxJAz-w=w672-h357-no with your any size image link.
2.) Change 860px with image height only.
3.) Change 5s with your desired time for smooth animation.
4.) No more editing required. Save and done.