CSS Background Properties

Complete reference of all CSS background properties with descriptions and examples

CSS Background Properties Overview

CSS background properties allow you to control the background appearance of elements. You can set background colors, images, gradients, and control how they are positioned, repeated, and sized.

Key Points:

  • Background properties can be set individually or using the shorthand background property
  • Multiple background images are supported by all modern browsers
  • Backgrounds can be layered with different blend modes
  • Gradients are created using the background-image property

Background Properties Reference

PropertyDescriptionValuesExampleActions
backgroundShorthand property for all background properties[background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip]background: #fff url('image.jpg') center/cover no-repeat fixed padding-box content-box;
background-colorSets the background color of an element<color> | transparentbackground-color: #3498db;
background-imageSets one or more background images on an elementnone | <url> | <gradient>background-image: url('image.jpg'), linear-gradient(red, blue);
background-positionSets the initial position for each background image<position>background-position: center top;
background-sizeSpecifies the size of the background imagesauto | cover | contain | <length> | <percentage>background-size: cover;
background-repeatDefines how background images are repeatedrepeat | repeat-x | repeat-y | no-repeat | space | roundbackground-repeat: no-repeat;
background-attachmentSets whether background images are fixed or scroll with the pagescroll | fixed | localbackground-attachment: fixed;
background-clipSpecifies the painting area of the backgroundborder-box | padding-box | content-box | textbackground-clip: content-box;
background-originSpecifies the positioning area of the backgroundborder-box | padding-box | content-boxbackground-origin: padding-box;
background-blend-modeDefines the blending mode of each background layernormal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminositybackground-blend-mode: multiply;

Detailed Explanations

The background Shorthand

The background shorthand property allows you to set all background properties in a single declaration.

/* Syntax */
background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];

/* Example */
background: #fff url('image.jpg') center/cover no-repeat fixed padding-box content-box;

Note: If any value is omitted, the default value for that property will be used.

Multiple Backgrounds

You can specify multiple background images by separating them with commas. The first image is on top.

.element {
background-image:
url('top-image.png'),
url('middle-image.png'),
linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
background-position:
top left,
center,
top left;
background-repeat: no-repeat;
}

Background Size Values

auto

Default value. The background image is displayed in its original size.

cover

Resize the image to cover the entire container, even if it has to stretch or crop.

contain

Resize the image to make sure it's fully visible within the container.

Background Clip & Origin

background-origin

Specifies where the background is positioned:

  • border-box: Background extends to the outside edge of the border
  • padding-box: Background extends to the outside edge of the padding
  • content-box: Background is positioned within the content box

background-clip

Specifies how far the background should extend:

  • border-box: Background extends behind the border
  • padding-box: Background extends to the inside edge of the border
  • content-box: Background is clipped to the content box
  • text: Background is clipped to the text (WebKit only)

Browser Support

PropertyChromeFirefoxSafariEdge
background-color1.0+1.0+1.0+12.0+
background-image1.0+1.0+1.0+12.0+
background-position1.0+1.0+1.0+12.0+
background-size3.0+4.0+4.1+9.0+
background-repeat1.0+1.0+1.0+12.0+
background-attachment1.0+1.0+1.0+12.0+
background-clip4.0+4.0+3.0+12.0+
background-origin4.0+4.0+3.0+12.0+
background-blend-mode35.0+30.0+8.0+79.0+
Multiple backgrounds4.0+3.6+3.1+12.0+

Notes:

  • Most modern browsers support all background properties
  • background-clip: text requires the -webkit- prefix in WebKit browsers
  • Gradients have excellent support in all modern browsers
  • Check caniuse.com for detailed browser compatibility

Best Practices

Performance Considerations

  • Use CSS gradients instead of images for simple patterns
  • Optimize background images for web (appropriate format and compression)
  • Consider using the image-set() function for responsive images
  • Avoid using very large background images on mobile devices
  • Use background-attachment: fixed sparingly as it can cause performance issues

Accessibility

  • Ensure sufficient contrast between text and background colors
  • Don't rely solely on background images to convey important information
  • Provide fallback background colors for when images fail to load
  • Test your backgrounds in different color vision deficiency modes
  • Consider how your backgrounds will look in high contrast mode

Responsive Design

  • Use background-size: cover or contain for flexible backgrounds
  • Consider using different background images for different screen sizes with media queries
  • Use relative units for background positioning when possible
  • Test how your backgrounds behave at different viewport sizes
  • Consider using CSS variables for easier responsive adjustments
< PreviousNext >