background
Description
The background property for CSS is shorthand for background-attachment, background-clip, background-color, background-image, background-position, and background-repeat.
Syntax
CSS
background: value;
JS
object.style.background = "value";
Values
<'background'> = <bg-layer># , <final-bg-layer>
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<bg-image> = <image> | none
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
An image layer but draws nothing.
<bg-position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
left
Computes to 0% for the horizontal position if one or two values are given. Otherwise, specifies the left edge as the origin for the next offset.
center
Computes to 50% for the horizontal position if the horizontal position is not specified. Otherwise, specifies 50% for the vertical position.
right
Computes to 100% for the horizontal position if one or two values are given. Otherwise, specifies the right edge as the origin for the next offset.
top
Computes to 0% for the vertical position if one or two values are given. Otherwise, specifies the top edge as the origin for the next offset.
bottom
Computes to 100% for the vertical position if one or two values are given. Otherwise, specifies the bottom edge as the origin for the next offset.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
auto
Automatically specified by the user agent.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat-x
The image is repeated in the horizontal direction as often as needed to cover the background painting area.
repeat-y
The image is repeated in the vertical direction as often as needed to cover the background painting area.
repeat
The image is repeated in the horizontal and vertical direction as often as needed to cover the background painting area.
space
The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.
round
The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.
no-repeat
The image is placed once and not repeated in this direction.
<attachment> = scroll | fixed | local
scroll
The background is fixed with regard to the element itself.
fixed
The background is fixed with regard to the viewport.
local
The background is fixed with regard to the element's contents.
<box> = border-box | padding-box | content-box
border-box
Area within the border box.
padding-box
Area within the padding box.
content-box
Area within the content box.
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<'background-color'> = <color>
<color>
Specifies the color using a keyword or a numerical specification.
<bg-image> = <image> | none
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<angle>
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
left
Left.
right
Right.
top
Top.
bottom
Bottom.
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
left
Left.
center
Center.
right
Right.
top
Top.
bottom
Bottom.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
An image layer but draws nothing.
<bg-position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
left
Computes to 0% for the horizontal position if one or two values are given. Otherwise, specifies the left edge as the origin for the next offset.
center
Computes to 50% for the horizontal position if the horizontal position is not specified. Otherwise, specifies 50% for the vertical position.
right
Computes to 100% for the horizontal position if one or two values are given. Otherwise, specifies the right edge as the origin for the next offset.
top
Computes to 0% for the vertical position if one or two values are given. Otherwise, specifies the top edge as the origin for the next offset.
bottom
Computes to 100% for the vertical position if one or two values are given. Otherwise, specifies the bottom edge as the origin for the next offset.
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
<length-percentage> = <length> | <percentage>
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
auto
Automatically specified by the user agent.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat-x
The image is repeated in the horizontal direction as often as needed to cover the background painting area.
repeat-y
The image is repeated in the vertical direction as often as needed to cover the background painting area.
repeat
The image is repeated in the horizontal and vertical direction as often as needed to cover the background painting area.
space
The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.
round
The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.
no-repeat
The image is placed once and not repeated in this direction.
<attachment> = scroll | fixed | local
scroll
The background is fixed with regard to the element itself.
fixed
The background is fixed with regard to the viewport.
local
The background is fixed with regard to the element's contents.
<box> = border-box | padding-box | content-box
border-box
Area within the border box.
padding-box
Area within the padding box.
content-box
Area within the content box.