[CSS - CLASSIC] Animated Scrolling Banner for your list

This topic is part of our CSS Tutorials and Add-ons section:
http://myanimelist.net/forum/?topicid=419405

/* ANIMATED SCROLLING BANNER
Z-index is the position of the scrolling pic (in front of or behind the list). A high z-index will move the list in front of other parts. A lower index will move the scrollbar behind other parts (-1 will be behind most lists).

If you have errors, you need to remove the #inlineContent codes from other parts of your layout before using these codes. Also read the special instructions on position in the next section below.
*/
#inlineContent {
position: fixed;
display: block !important;
left: 0;
top: 0;
width: 100%;
height: 145px;
overflow: hidden;
z-index: 10;
}

/* SCROLLING IMAGE
Change image and animation speeds here (20s).

For fixing errors, try to replace the '-200%' after "100% { background-position" with a negative px amount equal to the width of your banner image. Also try to replace the '300%' after the first and only "width" below with the full px width of the banner image you use. You should see the width of your banner when you create it or by clicking view image over it wherever its uploaded.
*/
#inlineContent:before {
pointer-events: none;
position: absolute;
content: '';
width: 300%;
height: 100%;
background-image: url("http://i.imgur.com/OIagBWN.png");
-moz-animation: scroll 50s linear infinite;
-webkit-animation: scroll 50s linear infinite;
}


@-moz-keyframes scroll
{
0% { background-position: 0; }
100% { background-position: -200%; }
}

@-webkit-keyframes scroll
{
0% { background-position: 0; }
100% { background-position: -200%; }
}

/* LOWER WALLPAPER
Lower the body wallpaper here so that your animated banner doesn't cover up the top of it.
*/
body {
background-position: 0 145px !important;
}