Can't recall what this is called.... a background that does not scroll, but content on top will scroll https://www.codecademy.com/learn/learn-css

can’t recall what this is called… a background that does not scroll, but content on top will scroll

kindly pass on the code or point me in the right direction : )

simple

no JS if possible

MANY THANKS!

Using google with search query: css background no scroll

lead me to: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

which contains your answer.

1 Like

@obxjuggler, I think what you are looking for is called a parallax.

To do this you would create a or

in your html, then assign that class (.parallax in css) a background-image. Set the background-image to:
/* Parallax Section */
.parallax {
	background-color: #4181C3;
	background-image: url(PARALLAX-wave.png);
	height: 400px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

I think the key you are looking for is ‘background-attachment: fixed;’

Keep in mind it’s important to set a background color, because the parallax feature does not work on mobile devices. If you still want the image to appear on mobile devices, you can set a @media query, and just remove the ‘fixed’.

Hope that helps.