# background-attachment property

The `background-attachment` property specifies how to scroll an element’s background image: together with a text, or the text will slide over the image.

## Syntax

`selector { background-attachment: fixed | scroll | local; }`

## Values

Value | Description
--- | ---
`fixed` | A background image will be stationary, and a text will slide over it.
`scroll` | A background image will scroll along with a text.
`local` | A background is fixed based on the behavior of an element. If an element has scrolling, the background will scroll along with a content, but the background outside the element will remain in place.

Default value: `scroll`.

## Example . The scroll value

Currently the `background-attachment` property is set to `scroll`. Scroll the element vertically - you will see the text scroll along with the background:

`<body> <div id="elem"> some long text... </div> </body>` `body { background-attachment: scroll; background-image: url("bg.png"); } #elem { width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px; }`

:

## Example . The fixed value

And now the `background-attachment` property is set to `fixed`. Scroll the element vertically - you will see the text sliding over the background:

`<body> <div id="elem"> some long text... </div> </body>` `body { background-attachment: fixed; background-image: url("bg.png"); } #elem { width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px; }`

:

## See also

- the `background` property
  that is a shorthand property for a background

← →
↑
en ru