Theory
Theory

Background-attachment property

Usually the background image scrolls along with the content of the block. This is clearly visible in the mini-browser. Scroll down the window and you will see the background rise to the top.

With the background-attachment property, you can lock the background in place and it will not move when scrolling.

Values of the property:

scroll — the background is scrolled along with the content. This is the default value.
fixed — the background does not scroll, it is fixed in one place.

This is the case when it is easier to show than to explain: perform the task and see how the background behavior changes as you scroll.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Background-attachment property</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </body> </html>

CSS

body { background-color: black; background-image: url("moon.jpg"); background-position: 50% 0; background-repeat: no-repeat; } .block { width: 192px; height: 256px; margin: 20px auto; background-color: #34495e; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 5px; } .block:nth-child(1) { background-image: url("cat_clean.png"); } .block:nth-child(2) { background-image: url("cat_fight.png"); } .block:nth-child(3) { background-image: url("cat_hiss.png"); } .block:nth-child(4) { background-image: url("cat_poo.png"); }

GoalsCompleted

Set fixed background image mode for the body.

Check how the background image behaves by scrolling the mini-browser window.