Your Search Results

    background

    Summary

    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 value 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 rgba(0,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

    View the live example

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

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    The definition of 'background' in that specification.
    Candidate Recommendation The shorthand property has been extended to support multiple backgrounds and the new background-size, background-origin and background-clip properties.
    CSS Level 2 (Revision 1)
    The definition of 'background' in that specification.
    Recommendation No significant changes
    CSS Level 1
    The definition of 'background' in that specification.
    Recommendation  

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
    Multiple backgrounds 3.6 (1.9.2) 1.0 9.0 10.5 1.3
    SVG image as background 4.0 (2.0) 31.0 9.0 # 21.0 5.1
    Support for background-size 18.0 (18.0) 21.0 # 9.0 21.0 5.1
    Support for background-origin and background-clip 22.0 (22.0) 31.0 9.0 21.0 5.1
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 (1.9.2) 2.1 10.0 5.0 3.2
    Multiple backgrounds 1.0 (1.9.2) 2.1 10.0 5.0 3.2
    SVG image as background 4.0 (2.0) 3.0 10.0 ? 4.2
    Support for background-size 18.0 (18.0) 3.0 10.0 (Yes) 4.0
    Support for background-origin and background-clip 22.0 (22.0) 3.0 10.0 Not supported 4.0

    See also