1. css
  2. /properties
  3. /background

background

Definition

In CSS, the background property is a shorthand property for setting multiple background-related properties in a single declaration.

Examples

To set the background color of an element:

body {
  background: #ffffff;
}

To set the background image of an element:

body {
  background: url(image.jpg);
}

To set the background image and repeat it both horizontally and vertically:

body {
  background: url(image.jpg) repeat;
}

To set the background image, repeat it horizontally, and fix it in place:

body {
  background: url(image.jpg) repeat-x fixed;
}

To set the background image, repeat it vertically, and position it at the bottom of the element:

body {
  background: url(image.jpg) repeat-y bottom;
}

To set the background color, image, and repeat the image both horizontally and vertically:

body {
  background: #ffffff url(image.jpg) repeat;
}

To set the background image and size it to cover the entire element:

body {
  background: url(image.jpg) no-repeat center/cover;
}

Values

ValueDescription
colorSpecifies the background color of an element.
url(URL)Specifies the URL of an image to use as the background.
repeatThe image is repeated both horizontally and vertically.
repeat-xThe image is repeated horizontally only.
repeat-yThe image is repeated vertically only.
no-repeatThe image is not repeated and only displayed once.
scrollThe background image scrolls with the page. This is the default value.
fixedThe background image is fixed in place and does not scroll with the page.
left topThe background image is positioned at the left top corner of the element.
centerThe background image is centered within the element.
right bottomThe background image is positioned at the right bottom corner of the element.
lengthThe background image is stretched or shrunk to the specified length.
coverThe background image is scaled to cover the entire container.
containThe background image is scaled to fit inside the container.
initialSets the property to its default value.
inheritInherits the property from the parent element.

Best Practices

  • Use the background-color value to set a solid background color for your elements. This can help improve the readability of your content and provide a visual contrast between different elements on the page.
  • Use the background-image value to add visual interest and texture to your page. However, be mindful of the performance impact of using large or high-resolution background images.
  • Use the background-repeat value to control how the background image is tiled within the element. The repeat value is useful for small, repeating patterns, while the no-repeat value is useful for large images that should only be displayed once.
  • Use the background-attachment value to control whether the background image scrolls with the page or is fixed in place. The fixed value is useful for creating a parallax effect or for displaying a full-screen background image.
  • Use the background-position value to control the position of the background image within the element. The left top, center, and right bottom values are commonly used to align the image horizontally and vertically.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes

However, some older web browsers may not support the background property, or they may only support a limited set of values. For example, the cover and contain values are not supported by Internet Explorer 8 and earlier versions.