Background images and colors


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


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


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


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


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


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


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


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


Offset the image

Use this property to reposition the image away from the element's origin.
css, style, background, background-position


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


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


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

style > background Background images and colors

🔗 🔎