Super Simple Parallax Fullscreen Hero Header with Object-Fit

What does “parallax” mean?

The in some corners of the web still popular “parallax effect” means that an object, in most cases an image, moves in a different speed than the default scroll speed. In other words, yes, it usually makes no sense whatsoever. Just eye candy.

And to make this example even more eye candier I use two congruent images, split in background and foreground, with different speeds.

Why is this solution different?

Most parallax solutions work with background images, which is totally fine. When they gave us background-size: cover back in the day it became even more flexible to make the idea work in a responsive environment.

However, you probably want an <img> in your html so that you can use <source> / <srcset>, have an alt text and easily control everything with the CMS of your choice.

The concept is super simple, as the title promised. We absolute position a div in a (in this case fullscreen) container and only manipulate the top and bottom values in relation to the window scroll position, so it's really just a few lines of (jQuery) code.

Since object-fit: cover lets the image fill the div and the overflow is hidden you won't see gaps.

Aligning the image(s)

This solution is of course naturally responsive. But depending on the image you may want to determine the focus, especially for small screens. Similar to background-position we thankfully have object-position. So I've added classes for that.

Extending the idea

There are of course countless possibilities. You could easily add more layers – maybe for text. I've already included the option to darken the image(s). But keep an eye on the performance. Use <srcset> to serve the perfect image sizes for all screens.

Btw, the container doesn't need to be fullscreen, it just needs some height and the images will align.

Thanks for reading this far. Cool photo by Patrick Hendry via Unsplash.