Each feature in detail MDN The backgroundCSS shorthand property sets all background style properties at once, such as color, image, origin, size, and repeat method.
Live preview Example from MDN
background: green; background: content-box radial-gradient(crimson, skyblue); background: no-repeat url("/shared-assets/images/examples/lizard.png"); background: left 5% / 15% 60% repeat-x
url("/shared-assets/images/examples/star.png"); background:
center / contain no-repeat
url("/shared-assets/images/examples/firefox-logo.svg"),
#eeeeee 35% url("/shared-assets/images/examples/lizard.png");
#example-element { min-width : 100 % ; min-height : 100 % ; padding : 10 % ; } < section id = "default-example" > < div id = "example-element" ></ div > </ section > Syntax <bg-layer>#? , <final-bg-layer>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Browser support First browser version supporting background Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-attachmentCSS property sets whether a background image's position is fixed within the viewport , or scrolls with its containing block.
Live preview Example from MDN
background-attachment: scroll; background-attachment: fixed; background-attachment: local; background-attachment: fixed, scroll; background-attachment: scroll, fixed;
body { overflow : scroll ; } #default-example { height : 600 px ; } #example-element { max-width : 20 rem ; height : 100 % ; background : url ( "https://developer.mozilla.org/shared-assets/images/examples/lizard.png" ) right 3 rem top 1 rem / 15 rem no-repeat , url ( "https://developer.mozilla.org/shared-assets/images/examples/moon.jpg" ) center / 10 rem ; font-size : 1.2 rem ; font-weight : bolder ; overflow : auto ; padding : 20 px ; color : red ; text-shadow : 0 0 0.5 rem black , 0 0 0.5 rem black ; } < section id = "default-example" > < div id = "example-element" > < p > From there to here< br /> from here to there,< br /> Funny things< br /> Are everywhere. </ p > < p >--Dr. Seuss</ p > </ div > </ section > Syntax <attachment>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial scroll Applies to all elements Inherited no Percentages N/A Computed value list, each item the keyword as specified Canonical order per grammar Animation type discrete Browser support First browser version supporting background-attachment Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 3.2
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-clipCSS property sets whether an element's background extends underneath its border box, padding box, or content box.
Live preview Example from MDN
background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text;
color: transparent;
text-shadow: none;
#example-element { background-image : url ( "https://developer.mozilla.org/shared-assets/images/examples/leopard.jpg" ); color : white ; text-shadow : 2 px 2 px black ; padding : 20 px ; border : 10 px dashed #333333 ; font-size : 2 em ; font-weight : bold ; } < section id = "default-example" > < div id = "example-element" >This is the content of the element.</ div > </ section > Syntax <bg-clip>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial border-box Applies to all elements Inherited no Percentages n/a Computed value as specified Canonical order per grammar Animation type repeatable list Browser support First browser version supporting background-clip Chrome 1 Edge 12 Firefox 4 Safari 5 Chrome Android 18 Safari iOS 5
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-colorCSS property sets the background color of an element.
Live preview Example from MDN
background-color: brown; background-color: #74992e; background-color: rgb(255 255 128); background-color: rgb(255 255 128 / 0.5); background-color: hsl(50 33% 25%); background-color: hsl(50 33% 25% / 0.75);
#example-element { min-width : 100 % ; min-height : 100 % ; padding : 10 % ; } < section id = "default-example" > < div class = "transition-all" id = "example-element" ></ div > </ section > Syntax <color>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial transparent Applies to all elements Inherited no Percentages N/A Computed value computed color Canonical order per grammar Animation type by computed value Browser support First browser version supporting background-color Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-imageCSS property sets one or more background images on an element.
Live preview Example from MDN
background-image: url("/shared-assets/images/examples/lizard.png"); background-image:
url("/shared-assets/images/examples/lizard.png"),
url("/shared-assets/images/examples/star.png"); background-image:
url("/shared-assets/images/examples/star.png"),
url("/shared-assets/images/examples/lizard.png"); background-image:
linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)),
url("/shared-assets/images/examples/lizard.png");
#example-element { min-width : 100 % ; min-height : 100 % ; padding : 10 % ; } < section id = "default-example" > < div id = "example-element" ></ div > </ section > Syntax <bg-image>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial none Applies to all elements Inherited no Percentages N/A Computed value list, each item either an <image> or the keyword none Canonical order per grammar Animation type discrete Browser support First browser version supporting background-image Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-originCSS property sets the background's origin: from the border start, inside the border, or inside the padding.
Live preview Example from MDN
background-origin: border-box;
background-repeat: no-repeat; background-origin: padding-box;
background-repeat: no-repeat; background-origin: content-box;
background-repeat: no-repeat;
#example-element { background-image : url ( "https://developer.mozilla.org/shared-assets/images/examples/leopard.jpg" ); color : #d73611 ; text-shadow : 2 px 2 px black ; padding : 20 px ; border : 10 px dashed #333333 ; font-size : 2 em ; font-weight : bold ; } < section id = "default-example" > < div id = "example-element" >This is the content of the element.</ div > </ section > Syntax <visual-box>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial padding-box Applies to all elements Inherited no Percentages N/A Computed value list, each item a keyword as specified Canonical order per grammar Animation type repeatable list Browser support First browser version supporting background-origin Chrome 1 Edge 12 Firefox 4 Safari 3 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-positionCSS property sets the initial position for each background image.
Live preview Example from MDN
background-position: top; background-position: left; background-position: center; background-position: 25% 75%; background-position: bottom 50px right 100px; background-position: right 35% bottom 45%;
#example-element { background-color : navajowhite ; background-image : url ( "https://developer.mozilla.org/shared-assets/images/examples/star.png" ); background-repeat : no-repeat ; height : 100 % ; } < section class = "display-block" id = "default-example" > < div class = "transition-all" id = "example-element" ></ div > </ section > Syntax <bg-position>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0% 0% Applies to all elements Inherited no Percentages refer to size of background positioning area minus size of background image; see text Computed value a list, each item a pair of offsets (horizontal and vertical) from the top left origin, each offset given as a computed <length-percentage> value Canonical order per grammar Animation type repeatable list Longhands background-position-xbackground-position-y Browser support First browser version supporting background-position Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax [ center | [ [ start | end ]? <length-percentage>? ]! ]#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0% Applies to all elements Inherited no Percentages refer to size of background positioning area minus size of background image Computed value A list, each item consisting of: an offset given as a computed <length-percentage> value, plus an origin keyword Canonical order per grammar Animation type repeatable list Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax [ center | [ [ start | end ]? <length-percentage>? ]! ]#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0% Applies to all elements Inherited no Percentages refer to inline-size of background positioning area minus inline-size of background image Computed value A list, each item consisting of: an offset given as a computed <length-percentage> value, plus an origin keyword Canonical order per grammar Animation type repeatable list Specification ↗
MDN The background-position-xCSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin
Live preview Example from MDN
background-position-x: left; background-position-x: center; background-position-x: 25%; background-position-x: 2rem; background-position-x: right 32px;
#example-element { background-color : navajowhite ; background-image : url ( "https://developer.mozilla.org/shared-assets/images/examples/star.png" ); background-repeat : no-repeat ; height : 100 % ; } < section class = "display-block" id = "default-example" > < div class = "transition-all" id = "example-element" ></ div > </ section > Syntax [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0% Applies to all elements Inherited no Percentages refer to width of background positioning area minus width of background image Computed value A list, each item consisting of: an offset given as a computed <length-percentage> value, plus an origin keyword Canonical order per grammar Animation type repeatable list Browser support First browser version supporting background-position-x Chrome 1 Edge 12 Firefox 49 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-position-yCSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin
Live preview Example from MDN
background-position-y: top; background-position-y: center; background-position-y: 25%; background-position-y: 2rem; background-position-y: bottom 32px;
#example-element { background-color : navajowhite ; background-image : url ( "https://developer.mozilla.org/shared-assets/images/examples/star.png" ); background-repeat : no-repeat ; height : 100 % ; } < section class = "display-block" id = "default-example" > < div class = "transition-all" id = "example-element" ></ div > </ section > Syntax [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0% Applies to all elements Inherited no Percentages refer to height of background positioning area minus height of background image Computed value A list, each item consisting of: an offset given as a computed <length-percentage> value, plus an origin keyword Canonical order per grammar Animation type repeatable list Browser support First browser version supporting background-position-y Chrome 1 Edge 12 Firefox 49 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-repeatCSS shorthand property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
Live preview Example from MDN
background-repeat: repeat-x; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; background-repeat: space repeat;
#example-element { background : #cccccc url ( "https://developer.mozilla.org/shared-assets/images/examples/moon.jpg" ) center / 120 px ; min-width : 100 % ; min-height : 100 % ; } < section id = "default-example" > < div id = "example-element" ></ div > </ section > Syntax <repeat-style>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial repeat Applies to all elements Inherited no Percentages N/A Computed value list, each item a pair of keywords, one per dimension Canonical order per grammar Animation type discrete Browser support First browser version supporting background-repeat Chrome 1 Edge 12 Firefox 1 Safari 1 Chrome Android 18 Safari iOS 1
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax <repetition>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial repeat Applies to all elements Inherited no Percentages N/A Computed value as specified Canonical order per grammar Animation type discrete Specification ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax <repetition>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial repeat Applies to all elements Inherited no Percentages N/A Computed value as specified Canonical order per grammar Animation type discrete Specification ↗
MDN The background-repeat-xCSS property sets how background images are repeated, or not, along the horizontal axis.
Live preview Example from MDN
background-repeat-x: repeat; background-repeat-x: space; background-repeat-x: round; background-repeat-x: no-repeat;
#example-element { background : #cccccc url ( "https://developer.mozilla.org/shared-assets/images/examples/moon.jpg" ) no-repeat center / 120 px ; min-width : 100 % ; min-height : 100 % ; } < section id = "default-example" > < div id = "example-element" ></ div > </ section > Syntax <repetition>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial repeat Applies to all elements Inherited no Percentages N/A Computed value as specified Canonical order per grammar Animation type discrete Browser support First browser version supporting background-repeat-x Chrome 5, removed in 120 Edge 79, removed in 120 Firefox No Safari 5, removed in 15 Chrome Android 18, removed in 120 Safari iOS 4.2, removed in 15
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-repeat-yCSS property sets how background images are repeated, or not, along the vertical axis.
Live preview Example from MDN
background-repeat-y: repeat; background-repeat-y: space; background-repeat-y: round; background-repeat-y: no-repeat;
#example-element { background : #cccccc url ( "https://developer.mozilla.org/shared-assets/images/examples/moon.jpg" ) center / 120 px ; min-width : 100 % ; min-height : 100 % ; } < section id = "default-example" > < div id = "example-element" ></ div > </ section > Syntax <repetition>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial repeat Applies to all elements Inherited no Percentages N/A Computed value as specified Canonical order per grammar Animation type discrete Browser support First browser version supporting background-repeat-y Chrome 5, removed in 120 Edge 79, removed in 120 Firefox No Safari 5, removed in 15 Chrome Android 18, removed in 120 Safari iOS 4.2, removed in 15
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The background-sizeCSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
Live preview Example from MDN
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-size: cover; background-size: 30%; background-size: 200px 100px;
#example-element { background-image : url ( "https://developer.mozilla.org/shared-assets/images/examples/hand.jpg" ); min-width : 100 % ; min-height : 100 % ; } < section id = "default-example" > < div class = "transition-all" id = "example-element" ></ div > </ section > Syntax <bg-size>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial auto Applies to all elements Inherited no Percentages see text Computed value list, each item a pair of sizes (one per axis) each represented as either a keyword or a computed <length-percentage> value Canonical order per grammar Animation type repeatable list Browser support First browser version supporting background-size Chrome 3 Edge 12 Firefox 4 Safari 5 Chrome Android 18 Safari iOS 4.2
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
Syntax <bg-layer>#Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial see individual properties Applies to all elements Inherited no Percentages see individual properties Computed value see individual properties Canonical order per grammar Animation type see individual properties Specification ↗