Parallax Header Image

Simple Parallax Effect in Responsive Design

In a recent project I came across a problem when a client wanted a simple parallax effect for an image slider.

Basically, he wanted an effect where the content would scroll over a fixed image slider. On a non-responsive site this is easily achievable by giving the container for the slider a quick set of rules:

#slider {
    z-index: -1;
    position: fixed;
    width: 100%;
}
#content {
    margin-top: 450px;
}

Below is a quick illustration of the parallax effect we’re trying to achieve.

Parallax Illustration - Example of Desired Effect

The reason I’m writing about this is of the simple fact that I was trying to achieve this on a responsive site, and I found few solutions out there, so I had to figure this out by myself. Hopefully, you might find use for this in some way or another.

When using position: fixed on an element, you will effectively remove the content of said element out of the document flow, meaning it won’t relate to anything but itself.┬áIf I went ahead and used the CSS rules above and then resized my browser window, my slider would get smaller, but the margin-top would stay the same and create a huge gap between the slider and the content.

 

So how can you easily create this parallax effect in a responsive layout?

What I ended up doing was creating a blank PNG image at the exact width and height of the slider and inserting it just beneath the slider, and infront of the content. Leaving my HTML markup as something like this:

<div class="slides-wrapper">
    <!-- slider content -->
</div>
<div class="slides-invisible">
    <img class="invisible" src="img/invisible.png" alt="">
</div>

Give these CSS styles to your PNG image:

.invisible {
    max-width: /* max-width of your slider */;
    height: 100%;
    width: 100%;
}

Here’s the finished site, with the desired parallax effect in use. Try resizing the browser window to see the parallax effect working in all its glory. If you have suggestions for alternative methods of doing this, leave a comment or send me a message.

  • David Andersson

    Parallax scrolling is supposed to be when images move at different speeds, creating the impression of field of depth. But the page you linked to has a non-moving background image. Seems to me you’re talking about a “fixed position background image”? I found this while googling, seems to solve the issue purely in CSS:
    body {
    background-image: url(“image.png”);
    background-repeat: no-repeat;
    background-attachment: fixed;
    }