----------------------------------------------DEMO--------------------------------------------------
----------------------------------------------CSS3--------------------------------------------------
body { background:#FFF; font:12px Arial, Helvetica, sans-serif; }
h1, h2 { text-align:center; margin:0; padding:0; color:#8fd6fe; }
.cont { position:relative; z-index:1; width:500px; margin:0 auto; background:#101a33; padding:50px; color:#fff; top:130px; border
x solid #c4d5e5; }
.wrap { background-color:#fff; width:800px; height:550px; background-attachment:fixed; padding:0px; margin:0px auto; background-image: url('city.jpeg');
background-repeat:no-repeat; background-position:0%; background-size:auto; animation-name:backgroundanimation; animation-duration:30s;
animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running;
-moz-animation-name:backgroundanimation; -moz-animation-duration:30s; -moz-animation-timing-function:linear; -moz-animation-delay:0s;
-moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running;
-webkit-animation-name:backgroundanimation; -webkit-animation-duration:30s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running;
-o-animation-name:backgroundanimation; -o-animation-duration:30s; -o-animation-timing-function:linear; -o-animation-delay:0s; -o-animation-iteration-count:infinite;
-o-animation-direction:alternate; -o-animation-play-state:running; }
@keyframes backgroundanimation { from {background-position:0%;} to {background-position:100%} }
@-moz-keyframes backgroundanimation { from {background-position:0%;} to {background-position:100%} }
@-webkit-keyframes backgroundanimation { from {background-position:0%;} to {background-position:100%} }
@-o-keyframes backgroundanimation { from {background-position:0%;} to {background-position:100%} }
.transparent { filter: alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; }
----------------------------------------------HTML5--------------------------------------------------
<div class="wrap">
<div class="cont transparent">
<h1>Automatic Scrolling Background With Transparent Content Box CSS3</h1>
<h2>by Muthujoo</h2>
CSS background properties are used to define the background effects of an element. CSS background properties are used to define the background effects of an element.
CSS background properties are used to define the background effects of an element. CSS background properties are used to define the background effects of an element.
CSS background properties are used to define the background effects of an element. CSS background properties are used to define the background effects of an element.
CSS background properties are used to define the background effects of an element. CSS background properties are used to define the background effects of an element.
CSS background properties are used to define the background effects of an element. CSS background properties are used to define the background effects of an element.
</div>
</div>
----------------------------------------------IMAGES-------------------------------------------------
