ScanSkill

background-attachment

The background-attachment property defines how to move the background image relative to the viewport.

Syntax

background-attachment: scroll | fixed | local;

Example

scroll

body {
            background-image:
                url("https://scanskill.com/wp-content/uploads/2022/02/cropped-Screen-Shot-2022-02-15-at-13.25.57-1.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-size: 200px 100px;
            border: 1px solid red;
        }

fixed

body {
            background-image:
                url("https://scanskill.com/wp-content/uploads/2022/02/cropped-Screen-Shot-2022-02-15-at-13.25.57-1.png");
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 200px 100px;
            border: 1px solid red;
        }

Property Values

scroll: It will make the background image scroll with the page. (Default value)

fixed: It will make the background image fixed at its position and not scroll with the page.

local: It will make the background image scroll with the element's contents.