CSS multiple backgrounds scrolling at different speeds

Question

I came across this website today and I was mystified: http://www.actionbutton.net/

Is he using some kind of known technique for his backgrounds that scroll at a different rate and overlap each other. I looked at the source but am pretty confused. Does anyone know what the technique is called and how to learn it?

?? you have the website, so just view source and figure it out? — Steve, Mar 17 '12 at 18:13

score 12 · Answer 1 · answered Aug 27 '13 at 08:32

Here is an approximation of the parallax effect that doesn't use JS (thus backgrounds are scrolling at constant speed). The jfiddle example: http://jsfiddle.net/MFC9B/2/

Key is that there is a 2-layer nested divs, the outer one to hold the background, the inner one to hold the content:

.section {        
    position:relative;
    z-index:1;
    height:500px;
    width:100%;
    background-attachment:fixed;    /* this keeps the background in place */
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.content {
    position:relative;
    z-index:2;
    background-color:#fff;
    border:2px solid #666;    
    height:50%;    /* this height difference allows the bg to show through */    
}

score 6 · Accepted Answer · answered Mar 17 '12 at 18:15

6

It's call parallax there's plenty of plugin for this e.g. http://www.ianlunn.co.uk/plugins/jquery-parallax/

answered Mar 17 '12 at 18:15

Rezigned

4,901
1
20
18

score 4 · Answer 3 · answered Apr 18 '12 at 17:36

You could also consider something like that (no javascript is required):

@keyframes backgroundscroller {
  from {
    background-position: 0% 0%;    
  }
  to {
    background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;    
  }
}

#yourdivid {
  background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png');

  animation-name: backgroundscroller;
  animation-duration: 300s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;  
}

Obviously you must be aware that this will work only with browsers that support CSS3 and you also want to consider including a very useful javascript that takes care of adding prefixes where and if needed: http://leaverou.github.com/prefixfree/

I'm curious about your approach but it isn't enough for someone else to follow. I created a div with text in it but it doesn't do anything... could you write something a little more complete? — ekkis, Aug 22 '14 at 21:39

CSS multiple backgrounds scrolling at different speeds

3 Answers3

Linked