Customize Background Behavior

Now that we have gone over the background basics, some properties related to the background can be customized as required. Here is a detailed explanation of each property that can be set using the background shorthand property:

background-repeat

Specifies whether the background image should be repeated horizontally, vertically, or not at all. Valid values are repeat, repeat-x, repeat-y, and no-repeat. For example:

This prevents the background image from being repeated on the body element.

background-attachment

Specifies whether the background image should scroll with the rest of the page or stay fixed in place. Valid values are scroll and fixed. For example:

This sets the background image to stay fixed in place on the body element, even if the page is scrolled.

background-position

Specifies the position of the background image. This can be a keyword (such as center, top, or bottom), a length value, or a combination of the two. For example:

This centers the background image on the body element.

background-clip

Specifies whether the background image should be painted within the border box, padding box, or content box of an element. Valid values are border-box, padding-box, and content-box. For example:

This sets the background image to be painted within the content box of the body element.

background-origin

Specifies the position of the background image within the element's background positioning area. Valid values are border-box, padding-box, and content-box. For example:

This sets the background image to be positioned within the content box of the body element.

background-size

Specifies the size of the background image. This can be a keyword (such as cover or contain), a length value, or a combination of the two. For example:

This sets the background image to cover the entire body element.