Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS multiple backgrounds scrolling at different speeds

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?

like image 458
ballaw Avatar asked Mar 17 '12 18:03

ballaw


People also ask

How do you make a background scroll in CSS?

To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.

Can I use CSS multiple backgrounds?

CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

How do I change my background while scrolling?

Set the background-size to "cover" to scale the images as large as possible to cover all the background area. Add links of the images with the background-image property. Style the content giving it a border and setting the width and height of it. Set the position to "fixed" so as it will be fixed while scrolling.


3 Answers

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/

like image 83
Andrea Sciamanna Avatar answered Oct 02 '22 20:10

Andrea Sciamanna


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 */    
}
like image 40
Frank Yin Avatar answered Oct 02 '22 18:10

Frank Yin


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

like image 25
Rezigned Avatar answered Oct 02 '22 18:10

Rezigned