facebook pixel, mcanous design, design company, Web design, Marketing

The “trick” of sliding backgrounds in CSS is not new. In fact, the first time I came across it might have been a couple of years ago on the Valio Con site (the current design doesn’t have it anymore). I happened to notice it on a couple of new sites I visited today, however, and thought it would be worth sharing.

This is the effect we’re after:

See the Pen gamYOy by CSS-Tricks (@css-tricks) on CodePen.

Notice that this is different from a CSS slideshow or carousel, where the the content is separated into slides that can be stopped at. There are great examples of those all over CodePen.

This technique takes the background of one element and slides it across the x-axis infinitely in a loop to create the effect of a never-ending and always moving background.

Setting up the HTML

This is sort of a blueprint of how our HTML needs to be structured:

There is one element that fits the exact width of the viewport, and another that runs through and overflows it. That means we only need to create two elements in the HTML markup: one for the background, and another to act as a containing wrapper for that background.

<div class="wrapper"> <div class="sliding-background"></div>

Positioning the Elements

Let’s go ahead and add some CSS that will correctly position our two elements.

.wrapper { overflow: hidden;
} .sliding-background { height: 500px; width: 5076px;

Our .wrapper is 100% of browser width by default (that’s how block-level elements are), and we’ve added an overflow property that will hide anything that is visually contained outside of it. Think of it like a crop on a photograph. There may be extra stuff outside the wrapper, but the wrapper is preventing us from seeing it.

That’s where our .sliding-background comes into play. It is set to some ridiculous width that would overflow most viewports. And that’s the trick: it should be something that would overflow the wrapper. In this case, I somewhat arbitrarily chose a 5076px width.

Creating the Background Image

We need an image if we’re going to scroll something across the screen, right? That’s our next order of business.

Remember how I mentioned that I had somewhat arbitrarily chosen 5075px as the width for the sliding background? Well, it is arbitrary, but intentional in the sense that it is nicely divisible by 3, which fits into the timing for a minute-long loop, which will come up a little later. That means the canvas for our background image is 5076 / 3 or 1692px. In the end, our background will repeat a total of three times in one minute in an infinite loop. Math for the win!

The 500px height is truly arbitrary. That can be whatever you want and will act as the height of the canvas for the background image.

Here’s the Photoshop template used in this example to get you started:

Download ZIP

Save (and optimize!) the image. This is what we’ll use as the background image in the CSS:

.sliding-background { background: url("..path/to/image") repeat-x; height: 500px; width: 5076px;

Great! That gives us the ginormous image that overflows the wrapper and can now be used to scroll across the screen ad infinitum.

The Sliding Effect

All right, let