background property CSS Reference

---

Definition and Usage

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

• Initial the concatenation of the initial values of its longhand properties:
  • background-image: none
  • background-position: 0% 0%
  • background-size: auto auto
  • background-repeat: repeat
  • background-origin: padding-box
  • background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • background-clip: border-box
  • background-color: transparent
• Applies to all elements
• Inherited no
• Percentages The values of its longhand properties the percentage value belongs to:
  • background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size: relative to the background positioning area
• Media visual
• Computed Value as each of the properties of the shorthand:
  • background-image: as specified, but with URIs made absolute
  • background-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage
  • background-size: as specified, with lengths made absolute
  • background-repeat: a list, each item consisting of two keywords, one per dimension
  • background-origin: as specified
  • background-style: is itself a shorthand, applies to the same elements as each of its longhand properties.
  • background-clip: as specified
  • background-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
• Animatable as each of the properties of the shorthand:
  • background-color: yes, as a color
  • background-image: no
  • background-clip: no
  • background-position: yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • background-size: yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
  • background-repeat: no
  • background-attachment: no
• Canonical order order of appearance in the formal grammar of the values

---

Syntax

Formal syntax: [ <bg-layer> , ]* <final-bg-layer>
               where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
                                       ^            ^              ^                 ^                ^              ^
                              <'background-image'>  |     <'background-size>        |    <'background-attachment'>  |
                                           <'background-position'>         <'background-repeat'>            <'background-origin'>
                                                                                                            & <'background-clip'>
               and <final-bg-layer> = <bg-layer> || <'background-color'>

  Note: The background-color can only be defined on the last background, as there is only one background color for the whole element.

---

Values

One or more of the following, in any order:

<'background-attachment'>

See background-attachment

<'background-clip'>

See background-clip

<'background-color'>

See background-color

<'background-image'>

See background-image

<'background-origin'>

See background-origin

<'background-position'>

See background-position

<'background-repeat'>

See background-repeat

<'background-size'>

See background-size. This property must be specified after background-position, separated with the '/' character.

---

Examples

body {
  background: red;
}
.topbanner {
  background: url("topbanner.png") #00D repeat-y fixed;
}

---

Compatibility

Desktop browsers

Mobile browsers