Messing with Background-Attachment

Earlier this week I came across an interesting Tumblr theme by Jarred Bishop. The site played with the background-attachment CSS property to show a unique background for each Tumblr post on his main page (depending on which post image he used) and stays static as you scroll.

I started to play around with some code to replicate this effect and instead came up with some different examples, while still manipulating background-attachment. Hit the jump for some demos.

Before we start coding, check these out!

Like them?

Moving the scroll bar on each box changes the effect in which the background moves inside it. You either get a simple scroller (nothing special), two garage-door-style shutters, or a really nice smooth-in animation that desaturates our parrot.

It’s all down to changing the background-attachment from “scroll” to “fixed”.

Styling the Containers

Here’s an example. This is from the last box in the set – the one that looks like it changes into black and white as you scroll. First we’ll set up the styles. These do most of the work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
  *
  {
    margin:0;
  }
  .container, .container div
  {
    height:300px;
    width:200px;
  }
  .container
  {
    overflow:auto;
    overflow-x:hidden; 
  }
  .container div
  {
    background-repeat:no-repeat;
    background-image:url('parrot.jpg');
  }
  .container div.grey
  {
    background-image:url('parrot-grey.jpg');
  }
  .container div.fixed
  {
    background-attachment:fixed;
  }
</style>

The first part sets all margins to zero (if you have a <body> tag it’s better to use that instead of the * “all” pseudo). This means we don’t get weird spacing issues with the background being in the top-left corner.

We set each container and the <div>s inside of them to have the same height and width, both matching your images. Means they won’t overlap each other with weird sizes.

The container class code gives the right side a scroll bar and removes it from the bottom (we don’t need the bottom one).

The rest should be okay.

Adding the Containers

There’s a tiny bit of HTML to add in.

1
2
3
4
<div class="container">
  <div class="fixed"></div>
  <div class="grey fixed"></div>
</div>

That’s all it takes, your CSS will do the rest.

We give our outer div the “container” class that we set earlier. The inside elements then can be given a “fixed” class to set its background-attachment.

Make sure to give the second one a “grey” class to change its image if you want to. For this you definitely do, but for the shutter-style examples it depends how you want it to look.

So now if you want to play around with the different effects, all you have to do is add or remove the “fixed” class from the HTML above.

Be sure to check the source of the example page to see how I did it. Just bear in mind that there are some styles in there that are purely to demonstrate them inside the grid.

Things like the “bottom” and “right” classes and the “position” attribute in the container class were only created for the example, but feel free to play with them and see what you get.

Tracing back to the start of this post, I’ll definitely be putting something else up based on Jarred’s theme, this being the first bit of insight into how it all works.