[fieldy2012]

Hi,

I stumble upon a website which has a moving background..
actualy i thik=nk its flash.. but when u right click the background.. its just a jpeg file..

Does anyone of u know how to do that? thanks..

[SKUZZ]

Could you possibly post a link of the site that does this?
It might be using Javascript to switch jpeg files are something, I'm not positive at all on this though.

[~Dec]

CSS3 transforms/keyframe animations is used for this sort of thing.

Here's an example of an infinitely slide up/down image:

HTML:

PHP Code


<?php 
<div class="element-with-background">
  <div class="background"></div>
  <div class="content">
    [b]<!--[/b] content goes here -->
  </div>
</div> 


CSS (without vendor prefixes, run this through autoprefixer):

PHP Code


<?php 
.element-with-background {
  position: relative;
}
.background {
  position: absolute;
  top: 0; left: 0;
  height: 4200px;
  background: url('../img/image.png') repeat top center;
  z-index: 1;
  animation: background-slide 200s linear infinite;
}
.content {
  position: relative;
  z-index: 2;
}
@keyframes background-slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -2100px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}