HTML/CSS - Fixed Backgrounds while scroll

Question

Any idea or explanation how they did the backgrounds of this site? http://upcircuit.org/ Basically, a fixed background is the trick here. But there are multiple backgrounds and I am trying to solve the tricks of this site :)) I tried scanning the page source but I have no idea how they did this.

Patrick Allen · Accepted Answer · 2014-04-19T19:01:12.247

They have panels that are the size of the window. Then what they are doing is setting a background image for each panel and setting its background-attachment: fixed so that it stays positioned relative to the window, not the div it is in.

I set up the fundamentals for you here: http://jsfiddle.net/Zc822/

body, html {
    width: 100%;  // Sets the html and body width and height 
    height: 100%; // to the width and height of the window.
    margin: 0;
}
.panel{
    width: 100%;  // Sets each panel to the width and height
    height: 100%; // of the body (which is set to the window)

    background-repeat: no-repeat;
    background-attachment: fixed;  //Sets background fixed in window
    background-size: cover;
}

Then you just need to specify a background-image for each individual panel.

Pretty sure this is what you are looking for.

oh yeah. I found it out for myself about now xD Thanks for confirming the idea I have in mind :D It's the exact same thing I'm am doing right now :D — Gibs, Apr 19 '14 at 19:06

score 1 · Answer 2 · answered Apr 19 '14 at 18:37

1

What have you tried? Have you tried to use

background-attachment: fixed;

Hope this helps.

answered Apr 19 '14 at 18:37

asertym

120
1
1
6

Mister Epic · Answer 3 · 2014-04-19T18:44:20.133

1

This is a parallax effect, which emulates a 3D space by having your foreground and background move at different speeds. It looks like images are perhaps swapped out and fixed at certain scroll spots. You'll need to use a little javascript, but it is not too difficult a trick to pull off:

Here's a library to help:

http://matthew.wagerfield.com/parallax/?utm_medium=App.net&utm_source=PourOver

Here's another neat site that does some neat things with parallax and scrolling: https://www.google.com/nexus/5/

edited Apr 19 '14 at 18:44

answered Apr 19 '14 at 18:37

Mister Epic

16,295
13
76
147

woah!I guess this was the one I was looking for :D But I'm not entirely sure since the site i have given uses css (or I dunno if there's a javascript in that part) Thanks! – Gibs Apr 19 '14 at 18:49