Background images and colors

background

Control the placement and behavior of background images, colors, and gradients.

background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
backdrop-filter

background

All-in-one background spec

This property sets all of these properties in a single declaration: background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size.

css, style, background, background

background-attachment

To scroll or not to scroll

This property controls whether or not a background image scrolls with its containing block.

css, style, background, background-attachment

background-blend-mode

Combining multiple backgrounds

Controls how two or more backgrounds should be merged. Backgrounds may include images, colors and gradients.

css, style, background, background-blend-mode

background-clip

How far does the background image extend

This property controls whether a background images extends all the way to its borders.

css, style, background, background-clip

background-color

A uniformly colored background

A solid or semi-transparent color is painted across the entire background of an element, underneath its text.

css, style, background, background-color

background-image

Making a splash

This property is used to specify an element's background using an image file or a color gradient.

css, style, background, background-image

background-origin

Fine tune the meaning of origin

Use this property to fine tune the precise meaning of "origin" as used with the other background properties.

css, style, background, background-origin

background-position

Offset the image

Use this property to reposition the image away from the element's origin.

css, style, background, background-position

background-repeat

Use the same image repeatedly

Use the same image over and over until the entire element's background is filled.

css, style, background, background-repeat

background-size

A perfect fit

Use this property to stretch, shrink, or perfectly fit a background image to match the element's size.

css, style, background, background-size

backdrop-filter

Dramatic background special effects

Shift or invert the hue, saturation, brightness or contrast of everything behind an element, or adjust its grayscale, sepia tone, opacity or drop-shadow.

css, style, background, backdrop-filter