How do I make the background image still while scrolling?

June 5, 2022

I am a beginner in html and CSS I was trying to modify my old project by adding a background image and I want the image to take the size of screen while remaining still while I scroll up or down
here is my code

”’

body {
  background-image:    url(https://lh3.googleusercontent.com/3WHvvnFSspZKbbRkM9SgvIUMDs6efWS5vXgmSglvoHASfV4TUhIFSXd77Ic9x02zAmyrMwpg-py0YceJYVLLCK9SpU9YQU56rm-uTBKb2KoTW3dnjpgVLvhJ26koIF-VXlzao11v=w2400);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

h1, h2 {
  text-align: center;
}

.catphoto {
  text-align : center;
}

”’

>Solution :

You can do this with the background-attachment property in CSS.

Example:

body {
  background-image: url(https://picsum.photos/1080/1920);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  background-attachment: fixed;
  
  height: 300vh;
}

.cover {
  background-color: aqua;
  height: 50vh;
  margin-top: 90vh;
  padding: 20px;
}

<div class="cover">
  (covering up so you can see the effect)
</div>

This fixes the position of the background to a specific place, like an element with the position of it set to fixed. It can easily be ported to your code by adding a single line in the CSS.