How a background image can be fixed on a position while the content scrolls?

The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.

/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment