Parallax Effect with only CSS

HTML-CSS
1

Need a light here, please :exploding_head:

I wanted to make the background of my form static, while the content would scroll with the scroll bar. When I put background fixed, the background adjusts to the size of the form, it’s not what I want. I want the image to be the size of the screen, and when I scroll down the form, the background will stay the same. I saw that this effect could be something like the parallax effect, but it is not exactly the same, cause in parallax effect the background, although it seems static, moves a little. Anyway I ended up mixing the background-attachment: fixed with the parallax effect and it worked, but honestly I have no idea why. Can anyone tell me if it happened by chance or if there is any logic at it?

All of the page’s content is inside the container, the section and the .wrapped that are doing the parallax effect actually have neither the background nor the content directly inside them.

HTML:
html parallax effect

CSS:
body {
color: black;
font-size: 16px;
font-family: Tabarra Shadow;
text-transform: uppercase;
margin: 0;
background-attachment: fixed;
background-color: (here is a very large gradient css, so I won’t put it for you)
}
.wrapped {
width: 100%;
height: 100vh;
overflow-x: hidden;
perspective: 2px;
transform-style: preserve-3d;
overflow-y: auto;
}
.section {
display: flex;
height: 100vh;
min-height: 700px;
position: relative;
transform-style: inherit;
}
.section::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
transform: translateZ(-1px) scale(1.5);
}

2

is this also live somewhere, like in codepen, repl or something similar?

its helpful that way, happy learning :slight_smile:

3

Hey! thanks for your time! Here is the code in codepen so you can visualize the background: https://codepen.io/danielasegadilha/pen/VwBBJzE

4

background is a shorthand property that lets you set multiple properties using that one property.

Any properties missing in the shorthand will overwrite the properties back to their default. This is why you often want to avoid using the background shorthand property or at least be aware of the pitfalls of using it.

/* sets the background-attachment to fixed */
background-attachment: fixed;
/* overwrites the background-attachment back to the default value of scroll */
background: rgb(51,204,204);

Switching the order of the properties will work.

body {
  /* sets background-attachment to scroll */
  background: rgb(51, 204, 204);
  /* sets background-attachment to fixed (cascade will overwrite) */
  background-attachment: fixed;
}

Using the long form for the other properties will also work as you are not overwriting any properties inadvertently.

body {
  background-attachment: fixed;
  background-color: rgb(51, 204, 204);
  background-image: linear-gradient(
    rgba(51, 204, 204, 1) 0%,
    rgba(225, 73, 30, 1) 100%
  );
}
2 Likes
5

Now that makes more sense, thanks a lot! Its working

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.