You have probably seen the parallax effect before. You scroll and it looks like the image is sitting in one place and unaffected by the scroll. Some people take these over the top by adding multiple layers and create the most stunning effect!
For today's topic, we will look into doing the simplest setup possible, to get you included in adding this wonderful effect to your website or project.
Parallax scroll using only CSS! permalink
Yes, it is possible to do this only with CSS.
For the HTML, let's use the following setup to keep it simple:
<h2>How are you?</h2>
<a href="https://daily-dev-tips.com/" target="blank">Blog</a>
<a href="https://twitter.com/DailyDevTips1" target="blank">Twitter</a>
We included 2 sections which we will make 100% of the viewport, the first one will contain the image which we will attempt to make parallax.
- To read more about the 100% viewport check out this article.
For the CSS we are going to use the following:
background-position: center center;
As you can see we make every section
width: 100vw (100% of the viewport width) and
height: 100vh (100% of the viewport height).
Next, we make this a
flex container to center the headings and buttons inside of it. (Read more on alignment here)
Then for the header section, we add the
background-image and center it using
background-position. Then I learned to always include
background-repeat: no-repeat but you can omit this. We set
background-size: cover this will make the background expand over the whole section.
And for the magic part 🎩, we set
background-attachment: fixed this is what will make it look parallax!
See for yourself in this small demo:
Browser Support permalink
background-attachment has quite a good browser support, just on mobile it's a bit glitchy, but you can use other queries to fix this.