CSS Backgrounds Module Level 4
CSS Backgrounds Module Level 4
W3C First Public Working Draft
16 December 2025
More details about this document
This version:
Latest published version:
Editor's Draft:
History:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Elika J. Etemad / fantasai
Apple
Lea Verou
Invited Expert
Sebastian Zartner
Invited Expert
Former Editor:
Bert Bos
W3C
Suggest an Edit for this Spec:
GitHub Editor
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This module contains the features of CSS relating to the backgrounds of boxes on the page.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index.
This document was published
by the
CSS Working Group
as a
First Public Working Draft
using the
Recommendation
track
Publication as a First Public Working Draft
does not imply endorsement by
W3C
and its Members.
This is a draft document
and may be updated, replaced
or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than a work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-backgrounds” in the title, like this:
“[css-backgrounds]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent that the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
1.
Introduction
When elements are rendered according to the
CSS box model
[CSS-BOX-3]
each element is either not displayed at all,
or formatted as one or more rectangular boxes.
Each box has a rectangular
content area
a band of
padding
around the content,
border
around the padding,
and a
margin
outside the border.
(The margin may actually be negative,
but margins have no influence on the background and border.)
The various areas and edges of a typical box.
(This diagram is explained in the CSS Box Model Module
[CSS-BOX-3]
.)
The properties of this module deal with the background of the
content
padding
, and
border
areas.
If an element is broken into multiple
box fragments
box-decoration-break
defines
how the borders and background are divided over the various fragments.
(An element can result in more than one fragment if it is broken
at the end of a line, at the end of a column or at the end of a page;
and continued in the next line, column or page.)
The relative stacking order of backgrounds, borders, and shadows
is given in this module.
For how these layers interact with other rendered content,
see Appendix E “Elaborate description of Stacking Contexts” in
[CSS2]
1.1.
Module Interactions
This specification extends the parts related to backgrounds
of CSS Backgrounds and Borders Module Level 3
[CSS3BG]
It provides specifications for the added
background-repeat-*
and `background-position-*' longhands,
a new
background-tbd
property that allows to define the background layers excluding the color,
and adds two new values to
background-clip
All properties in this module apply to the
::first-letter
and
::first-line
pseudo-elements
1.2.
Value Definitions
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
For example, combining with
CSS Images
allows for using CSS gradients as
background-image
or
border-image
values.
[CSS-IMAGES-3]
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
2.
Defining Backgrounds
Each box has a background layer that may be fully transparent (the default),
or filled with a color and/or one or more images.
The background properties specify what color (
background-color
and images (
background-image
) to use,
and how they are sized, positioned, tiled, etc.
The background properties are not inherited,
but the parent box’s background will shine through by default
because of the initial
transparent
value on
background-color
2.1.
Base Color: the
background-color
property
Name:
background-color
Value:
Initial:
transparent
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
computed color
Canonical order:
per grammar
Animation type:
by computed value
Tests
background-color-animation-backdrop-infinite-duration-crash.html
(live test)
(source)
background-color-animation-custom-property.html
(live test)
(source)
background-color-animation-custom-timing-function-reverse.html
(live test)
(source)
background-color-animation-custom-timing-function.html
(live test)
(source)
background-color-animation-element-not-visible-at-current-viewport.html
(live test)
(source)
background-color-animation-fallback-additive-keyframe.html
(live test)
(source)
background-color-animation-fallback-missing-0-percent.html
(live test)
(source)
background-color-animation-fallback-missing-100-percent.html
(live test)
(source)
background-color-animation-fallback-replace.html
(live test)
(source)
background-color-animation-field-crash.html
(live test)
(source)
background-color-animation-fragmented.html
(live test)
(source)
background-color-animation-half-opaque.html
(live test)
(source)
background-color-animation-in-body.html
(live test)
(source)
background-color-animation-non-empty-no-draw-crash.html
(live test)
(source)
background-color-animation-non-zero-size-element-change-to-zero.html
(live test)
(source)
background-color-animation-pseudo-element.html
(live test)
(source)
background-color-animation-removed-element-crash.html
(live test)
(source)
background-color-animation-single-keyframe.html
(live test)
(source)
background-color-animation-three-keyframes1.html
(live test)
(source)
background-color-animation-three-keyframes2.html
(live test)
(source)
background-color-animation-three-keyframes3.html
(live test)
(source)
background-color-animation-will-change-contents.html
(live test)
(source)
background-color-animation-with-blur.html
(live test)
(source)
background-color-animation-with-images.html
(live test)
(source)
background-color-animation-with-mask.html
(live test)
(source)
background-color-animation-with-table1.html
(live test)
(source)
background-color-animation-with-table2.html
(live test)
(source)
background-color-animation-with-table3.html
(live test)
(source)
background-color-animation-with-table4.html
(live test)
(source)
background-color-animation-with-zero-playbackRate.html
(live test)
(source)
background-color-animation-zero-size-element-change-to-non-zero.html
(live test)
(source)
background-color-animation-zero-size-element.html
(live test)
(source)
background-color-animation.html
(live test)
(source)
background-color-interpolation.html
(live test)
(source)
background-color-scroll-into-viewport.html
(live test)
(source)
background-color-transition-colormix.html
(live test)
(source)
background-color-transition-currentcolor.html
(live test)
(source)
background-color-transition.html
(live test)
(source)
background-color-transparent-animation-in-body.html
(live test)
(source)
background-color-animation-with-zero-alpha.html
(live test)
(source)
background-color-transition-obscured.html
(live test)
(source)
background-color-transition-with-delay.html
(live test)
(source)
background-color-transition-with-initially-transparent.html
(live test)
(source)
two-background-color-animation-diff-length1.html
(live test)
(source)
two-background-color-animation-diff-length2.html
(live test)
(source)
two-background-color-animation-diff-length3.html
(live test)
(source)
background-none-none-and-color.html
(live test)
(source)
background-color-body-propagation-001.html
(live test)
(source)
background-color-body-propagation-002.html
(live test)
(source)
background-color-body-propagation-003.html
(live test)
(source)
background-color-body-propagation-004.html
(live test)
(source)
background-color-body-propagation-005.html
(live test)
(source)
background-color-body-propagation-006.html
(live test)
(source)
background-color-body-propagation-007.html
(live test)
(source)
background-color-body-propagation-008.html
(live test)
(source)
background-color-body-propagation-009.html
(live test)
(source)
background-color-clip.html
(live test)
(source)
background-color-root-propagation-001.html
(live test)
(source)
background-color-root-propagation-002.html
(live test)
(source)
bg-color-with-gradient.html
(live test)
(source)
child-move-reveals-parent-background.html
(live test)
(source)
color-mix-currentcolor-background-repaint-parent.html
(live test)
(source)
color-mix-currentcolor-background-repaint.html
(live test)
(source)
simple-bg-color.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
inline-background-rtl-001.html
(live test)
(source)
background-color-computed.html
(live test)
(source)
background-color-invalid.html
(live test)
(source)
background-color-valid.html
(live test)
(source)
color-behind-images.htm (visual test)
(source)
This property sets the
background color
of a box.
This color is drawn behind any background images.
Example:
h1 { background-color: #F00 } /* Sets background to red. */
The
background color
is clipped
according to the
background-clip
value
associated with the bottom-most
background image layer
2.2.
Image Sources: the
background-image
property
Name:
background-image
Value:
Initial:
none
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
list, each item either an
or the keyword
none
Canonical order:
per grammar
Animation type:
discrete
Tests
background-image-001.html
(live test)
(source)
background-image-002.html
(live test)
(source)
background-image-003.html
(live test)
(source)
background-image-004.html
(live test)
(source)
background-image-005.html
(live test)
(source)
background-image-006.html
(live test)
(source)
background-image-007.html
(live test)
(source)
background-image-centered-with-border-radius.html
(live test)
(source)
background-image-centered.html
(live test)
(source)
background-image-cors-no-reload.html
(live test)
(source)
background-image-cover-zoomed-1.html
(live test)
(source)
background-image-first-letter.html
(live test)
(source)
background-image-first-line.html
(live test)
(source)
background-image-gradient-currentcolor-conic-repaint.html
(live test)
(source)
background-image-gradient-currentcolor-linear-repaint.html
(live test)
(source)
background-image-gradient-currentcolor-radial-repaint.html
(live test)
(source)
background-image-gradient-currentcolor-visited.html
(live test)
(source)
background-image-gradient-interpolation-repaint.html
(live test)
(source)
background-image-large-with-auto.html
(live test)
(source)
background-image-none-gradient-repaint.html
(live test)
(source)
background-image-shared-stylesheet.html
(live test)
(source)
background-image-table-cells-straddling-no-repeat.html
(live test)
(source)
background-image-table-cells-zoomed.html
(live test)
(source)
background-image-with-border-radius-fidelity.html
(live test)
(source)
background-image-interpolation.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
background-image-computed.sub.html
(live test)
(source)
background-image-invalid.html
(live test)
(source)
background-image-valid.html
(live test)
(source)
This property specifies the
background image(s)
of an element.
Images are drawn with the first specified one on top (closest to the user)
and each subsequent image behind the previous one.
The property’s value is given as a comma-separated list
of
values where
none
A value of
none
counts as a
background image layer
but draws nothing.
An image that is empty (zero width or zero height),
that fails to download,
or that cannot be displayed
(e.g., because it is not in a supported image format)
likewise counts as a
layer
but draws nothing.
See
§ 3 Layering Multiple Background Images
for how
background-image
interacts
with other comma-separated background properties
to form each
background image layer
When setting a background image,
authors should also specify a
background-color
that will preserve contrast with the text
for when the image is unavailable.
For accessibility reasons,
authors should not use background images
as the sole method of conveying important information.
See
Web Content Accessibility Guideline F3
[WCAG20]
Images are not accessible in non-graphical presentations,
and background images specifically
might be turned off in high-contrast display modes.
Note:
Stylistic foreground images can be provided in CSS
with the
content
property.
Semantically-important foreground images should be provided
in the document markup, e.g. with the tag in HTML.
Note:
Media fragments
can be used to display a portion of an image.
The
CSS Images
module
will provide fallback syntax for image formats
and include additional controls for image display.
Some examples specifying background images:
html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }
Implementations may optimize
by not downloading and drawing images that are not visible
(e.g., because they are behind other, fully opaque images).
2.3.
Tiling Images: the
background-repeat-x
background-repeat-y
background-repeat-block
, and
background-repeat-inline
properties
Name:
background-repeat-x
background-repeat-y
background-repeat-block
background-repeat-inline
Value:
Initial:
repeat
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
as specified
Canonical order:
per grammar
Animation type:
discrete
Logical property group:
background-repeat
= repeat
space
round
no-repeat
These properties specify whether and how background images are tiled
along one axis after they have been
sized
and
positioned
repeat
The image is repeated in the given direction as often as needed
to cover the
background painting area
space
The image is repeated in the given direction as often as will fit
within the
background positioning area
without being
clipped and then the repeated images are spaced out to fill the area.
The first and last images touch the edges of the area.
If the
background painting area
is larger than the background positioning area,
then the pattern repeats to fill the background painting area.
The value of
background-position
for this direction is ignored,
unless there is not enough space for two copies of the image in this direction,
in which case only one image is placed and
background-position
determines its position in this direction.
round
The image is repeated in the given direction 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.
See the formula under
background-size
If the
background painting area
is larger than the background positioning area,
then the pattern repeats to fill the background painting area.
no-repeat
The image is placed once and not repeated in the given direction.
Unless one of the axes is set to
no-repeat
the whole background painting area will be tiled,
i.e., not just one vertical strip and one horizontal strip.
Example(s):
body {
background: white url("pendant.png");
background-repeat-y: repeat;
background-position: center;
The effect of
repeat-y
One copy of the background image is centered,
and other copies are put above and below it
to make a vertical band behind the element.
See the section
§ 3 Layering Multiple Background Images
for how
background-repeat-x
background-repeat-y
background-repeat-block
and
background-repeat-inline
interact with other comma-separated background properties
to form each background image layer.
2.4.
Tiling Images Shorthand: the
background-repeat
property
Name:
background-repeat
Value:
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
Tests
discrete-no-interpolation.html
(live test)
(source)
background-repeat-round-1a.html
(live test)
(source)
background-repeat-round-1b.html
(live test)
(source)
background-repeat-round-1c.html
(live test)
(source)
background-repeat-round-1d.html
(live test)
(source)
background-repeat-round-1e.html
(live test)
(source)
background-repeat-round-2.html
(live test)
(source)
background-repeat-round-3.html
(live test)
(source)
background-repeat-round-4.html
(live test)
(source)
background-repeat-space-10.html
(live test)
(source)
background-repeat-space-1a.html
(live test)
(source)
background-repeat-space-1b.html
(live test)
(source)
background-repeat-space-1c.html
(live test)
(source)
background-repeat-space-2.html
(live test)
(source)
background-repeat-space-3.html
(live test)
(source)
background-repeat-space-4.html
(live test)
(source)
background-repeat-space-5.html
(live test)
(source)
background-repeat-space-6.html
(live test)
(source)
background-repeat-space-7.html
(live test)
(source)
background-repeat-space-8.html
(live test)
(source)
background-repeat-space-9.html
(live test)
(source)
background-repeat-no-repeat.xht
(live test)
(source)
background-repeat-repeat-x.xht
(live test)
(source)
background-repeat-repeat-y.xht
(live test)
(source)
background-repeat-round-roundup.xht
(live test)
(source)
background-repeat-round.xht
(live test)
(source)
background-repeat-space.xht
(live test)
(source)
gradient-repeat-spaced-with-borders.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
background-repeat-computed.html
(live test)
(source)
background-repeat-invalid.html
(live test)
(source)
background-repeat-valid.html
(live test)
(source)
subpixel-repeat-no-repeat-mix.html
(live test)
(source)
This shorthand sets the values for the
background-repeat-x
and
background-repeat-y
longhand properties.
= repeat-x
repeat-y
repeat-block
repeat-inline
{1,2}
Single values for
have the following
meanings:
repeat-x
Computes to
repeat no-repeat
repeat-y
Computes to
no-repeat repeat
repeat-block
Computes to
repeat
in the
block axis
and
no-repeat
in the
inline axis
repeat-inline
Computes to
repeat
in the
inline axis
and
no-repeat
in the
block axis
repeat
Computes to
repeat repeat
space
Computes to
space space
round
Computes to
round round
no-repeat
Computes to
no-repeat no-repeat
If a
value has two keywords,
the first one is for the horizontal direction,
the second for the vertical one.
Example(s):
body {
background-image: url(dot.png) white;
background-repeat: space;
The effect of
space
the image of a dot is tiled to cover the whole background
and the images are equally spaced.
See the section
§ 3 Layering Multiple Background Images
for how
background-repeat
interacts with other
comma-separated background properties to form each background image
layer.
Should a
'background-repeat: extend'
be added?
2.5.
Affixing Images: the
background-attachment
property
Name:
background-attachment
Value:
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
Tests
discrete-no-interpolation.html
(live test)
(source)
background-attachment-350.html
(live test)
(source)
background-attachment-353.html
(live test)
(source)
background-attachment-fixed-block-002.html
(live test)
(source)
background-attachment-fixed-border-radius-offset.html
(live test)
(source)
background-attachment-fixed-inline-002.html
(live test)
(source)
background-attachment-fixed-inline-scrolled.html
(live test)
(source)
background-attachment-fixed-inside-transform-1.html
(live test)
(source)
background-attachment-local-block-002.html
(live test)
(source)
background-attachment-local-hidden.html
(live test)
(source)
attachment-local-clipping-color-1.html
(live test)
(source)
attachment-local-clipping-color-2.html
(live test)
(source)
attachment-local-clipping-color-3.html
(live test)
(source)
attachment-local-clipping-color-4.html
(live test)
(source)
attachment-local-clipping-color-5.html
(live test)
(source)
attachment-local-clipping-color-6.html
(live test)
(source)
attachment-local-clipping-image-1.html
(live test)
(source)
attachment-local-clipping-image-2.html
(live test)
(source)
attachment-local-clipping-image-3.html
(live test)
(source)
attachment-local-clipping-image-4.html
(live test)
(source)
attachment-local-clipping-image-5.html
(live test)
(source)
attachment-local-clipping-image-6.html
(live test)
(source)
attachment-local-positioning-2.html
(live test)
(source)
attachment-local-positioning-3.html
(live test)
(source)
attachment-local-positioning-4.html
(live test)
(source)
attachment-local-positioning-5.html
(live test)
(source)
attachment-scroll-positioning-1.html
(live test)
(source)
background-attachment-margin-root-001.html
(live test)
(source)
background-attachment-margin-root-002.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
local-attachment-content-box-scroll.html
(live test)
(source)
background-attachment-computed.html
(live test)
(source)
background-attachment-invalid.html
(live test)
(source)
background-attachment-valid.html
(live test)
(source)
table-cell-background-local-002.html
(live test)
(source)
table-cell-background-local-003.html
(live test)
(source)
table-cell-background-local.html
(live test)
(source)
If
background images
are specified,
this property specifies whether they are
fixed with regard to the
viewport
fixed
or scroll along with the box (
scroll
or its contents (
local
).
The property’s value is given as a comma-separated list
of
keywords where
= scroll
fixed
local
fixed
The background is fixed with regard to the viewport.
In
paged media
where there is no viewport,
fixed
background is fixed with respect to
the
page box
and therefore replicated on every page.
Note:
There is only one viewport per view.
Even if an box is a
scroll container
fixed
background doesn’t move with the box.
local
The background is fixed with regard to the box’s contents:
if the box has a scrolling mechanism,
the background scrolls with the box’s contents,
and the
background painting area
and
background positioning area
are relative to the
scrollable overflow area
of the box
rather than to the border framing them.
Because the
scrollable overflow area
does not include the
border area
for
scroll containers
the
border-box
value of
background-clip
may be treated the same as
padding-box
scroll
The background is fixed with regard to the box itself
and does not scroll with its contents.
(It is effectively attached to the box’s border.)
Even if the image is fixed,
it is still only visible when it is in the
background painting area
of the box
or otherwise unclipped.
(See
§ 4 Backgrounds of Special Elements
for the cases when
background images are not clipped.)
Thus, unless the image is tiled, it may be invisible.
This example creates an infinite vertical band
that remains “glued” to the viewport when the document is scrolled.
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
Note:
User agents that do not support
fixed
backgrounds
(for example due to limitations of the hardware platform)
will ignore declarations
with the keyword
fixed
For example:
body {
/* For all UAs: */
background: white url(paper.png) scroll;
/* For UAs that do fixed backgrounds: */
background: white url(ledger.png) fixed;
h1 {
/* For all UAs: */
background: silver;
/* For UAs that do fixed backgrounds: */
background: url(stripe.png) fixed, white url(ledger.png) fixed;
See
§ 3 Layering Multiple Background Images
for how
background-attachment
interacts
with other comma-separated background properties
to form each
background image layer
2.6.
Background Positioning: the
background-position-x
background-position-y
background-position-inline
, and
background-position-block
properties
This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
Name:
background-position-x
Value:
[ center
[ [ left
right
x-start
x-end ]
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
value, plus an origin keyword
Canonical order:
per grammar
Animation type:
repeatable list
Logical property group:
background-position
This property specifies the background position’s horizontal component.
An omitted origin keyword is assumed to be
left
Name:
background-position-y
Value:
[ center
[ [ top
bottom
y-start
y-end ]
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
value, plus an origin keyword
Canonical order:
per grammar
Animation type:
repeatable list
Logical property group:
background-position
This property specifies the background position’s vertical component.
An omitted origin keyword is assumed to be
top
Name:
background-position-inline
Value:
[ center
[ [ start
end ]
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
value, plus an origin keyword
Canonical order:
per grammar
Animation type:
repeatable list
Logical property group:
background-position
This property specifies the background position’s inline-axis component.
An omitted origin keyword is assumed to be
start
Name:
background-position-block
Value:
[ center
[ [ start
end ]
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
value, plus an origin keyword
Canonical order:
per grammar
Animation type:
repeatable list
Logical property group:
background-position
This property specifies the background position’s block-axis component.
An omitted origin keyword is assumed to be
start
A percentage for the horizontal offset is relative to
width of
background positioning area
width of
background image
).
A percentage for the vertical offset is relative to
height of
background positioning area
height of
background image
),
where the size of the image is the size given by
background-size
For example, with a value pair of
0% 0%
the upper left corner of the image is aligned with
the upper left corner of, usually, the box’s
padding edge
A value pair of
100% 100%
places
the lower right corner of the image
in the lower right corner of the area.
With a value pair of
75% 50%
the point 75% across and 50% down the image
is to be placed at the point 75% across and 50% down the area.
Diagram of the meaning of
background-position: 75% 50%
A length value gives a fixed length as the offset.
For example, with a value pair of
2cm 1cm
the upper left corner of the image is placed
2cm to the right and 1cm below
the upper left corner of the
background positioning area
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.
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.
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.
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%
left 50%
) for the horizontal position
if the horizontal position is not otherwise specified,
or
50%
top 50%
) for the vertical position if it is.
The following
background
shorthand declarations use keywords
to set
background-position
to the stated percentage values.
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
In the example below, the (single) image is placed
in the lower-right corner of the viewport.
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
Background positions can also be relative to other corners than the top left.
For example, the following puts the background image
10px from the bottom and 3em from the right:
background-position: right 3em bottom 10px
See
§ 3 Layering Multiple Background Images
for how
background-position
interacts
with other comma-separated background properties
to form each
background image layer
2.7.
Background Positioning Shorthand: the
background-position
shorthand property
Name:
background-position
Value:
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
value
Canonical order:
per grammar
Animation type:
repeatable list
Tests
background-position-composition.html
(live test)
(source)
background-position-interpolation.html
(live test)
(source)
background-position-x-interpolation.html
(live test)
(source)
background-position-y-interpolation.html
(live test)
(source)
background-position-calc-minmax-001.html
(live test)
(source)
background-position-negative-percentage-comparison-002.html
(live test)
(source)
background-position-negative-percentage-comparison.html
(live test)
(source)
background-position-three-four-values.html
(live test)
(source)
background-position-xy-three-four-values-passthru.html
(live test)
(source)
background-position-bottom-right-repeat-round.html
(live test)
(source)
background-position-right-in-body.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
background-position-computed.html
(live test)
(source)
background-position-invalid.html
(live test)
(source)
background-position-valid.html
(live test)
(source)
background-position-x-computed.html
(live test)
(source)
background-position-x-invalid.html
(live test)
(source)
background-position-x-valid.html
(live test)
(source)
background-position-y-computed.html
(live test)
(source)
background-position-y-invalid.html
(live test)
(source)
background-position-y-valid.html
(live test)
(source)
If
background images
have been specified,
this property specifies their initial position
(after any
resizing
within their corresponding
background positioning area
This property is a
shorthand property
that sets
background-position-x
background-position-y
background-position-block
, and
background-position-inline
in a single declaration.
Its value is given as a comma-separated list
of
values, which are interpreted as
values
with the resized
background image
as the
alignment subject
and the
background positioning area
as the
alignment container
Note:
A pair of keywords can be reordered,
while a combination of keyword and length or percentage cannot.
So
center left
is valid while
50% left
is not.
If three or four values are given,
then each
represents an offset
and must be preceded by a keyword,
which specifies from which edge the offset is given.
For example,
background-position: bottom 10px right 20px
represents a
10px
vertical offset up from the bottom edge
and a
20px
horizontal offset leftward from the right edge.
If three values are given,
the missing offset is assumed to be zero.
Positive values represent an offset
inward
from the edge of the
background positioning area
Negative values represent an offset
outward
from the edge of the
background positioning area
The following declarations give the stated (horizontal, vertical)
offsets from the top left corner:
background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */
= [
[ left
center
right ]
&&
[ [ top
bottom ]
[ [ left
right ]
&&
[ top
center
bottom ]
The omitted
in the
background-position
-specific
syntax variant
defaults to
0%
Specify how the
longhand properties
are set.
[Issue #9690]
2.7.1.
Serialization of
background-position
values
The
specified value
and
computed value
of the
type
serialize exactly as defined in
[CSS-VALUES-4]
for
For 3-value productions
(which are not valid in
),
the
specified value
serialization
is identical to the equivalent 4-value syntax
except that the omitted offset remains omitted.
2.8.
Painting Area: the
background-clip
property
Name:
background-clip
Value:
Initial:
border-box
Applies to:
all elements
Inherited:
no
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
repeatable list
Tests
discrete-no-interpolation.html
(live test)
(source)
background-clip-001.html
(live test)
(source)
background-clip-002.html
(live test)
(source)
background-clip-003.html
(live test)
(source)
background-clip-004.html
(live test)
(source)
background-clip-005.html
(live test)
(source)
background-clip-006.html
(live test)
(source)
background-clip-007.html
(live test)
(source)
background-clip-008.html
(live test)
(source)
background-clip-009.html
(live test)
(source)
background-clip-010.html
(live test)
(source)
background-clip-color-repaint.html
(live test)
(source)
background-clip-color.html
(live test)
(source)
background-clip-content-box-001.html
(live test)
(source)
background-clip-content-box-002.html
(live test)
(source)
background-clip-padding-box-001.html
(live test)
(source)
background-clip-padding-box-with-border-radius.html
(live test)
(source)
background-clip-content-box-with-border-radius-002.html
(live test)
(source)
background-clip-content-box-with-border-radius-003.html
(live test)
(source)
background-clip-padding-box-with-border-radius-002.html
(live test)
(source)
background-clip-padding-box-with-border-radius-003.html
(live test)
(source)
clip-border-area-background-geometry.html
(live test)
(source)
clip-border-area-border-on-top.html
(live test)
(source)
clip-border-area-border-image.html
(live test)
(source)
clip-border-area-box-decoration-break.html
(live test)
(source)
clip-border-area-multiple-backgrounds.html
(live test)
(source)
clip-border-area-on-body-not-propagated-to-root.html
(live test)
(source)
clip-border-area-on-body-propagated-to-root.html
(live test)
(source)
clip-border-area-on-root.html
(live test)
(source)
clip-border-area.html
(live test)
(source)
clip-rounded-corner.html
(live test)
(source)
clip-text-ellipsis.html
(live test)
(source)
clip-text-animated-text.html
(live test)
(source)
clip-text-dynamic-2.html
(live test)
(source)
clip-text-flex.html
(live test)
(source)
clip-text-multi-line.html
(live test)
(source)
clip-text-on-body-not-propagated-to-root.html
(live test)
(source)
clip-text-on-body-propagated-to-root.html
(live test)
(source)
clip-text-on-root.html
(live test)
(source)
clip-text-out-of-flow-child.html
(live test)
(source)
clip-text-text-decorations.html
(live test)
(source)
clip-text-text-emphasis.html
(live test)
(source)
background-clip_padding-box.html
(live test)
(source)
background-paint-order-001.html
(live test)
(source)
background-rounded-image-clip-001.html
(live test)
(source)
background-rounded-image-clip-002.html
(live test)
(source)
css3-background-clip-border-box.html
(live test)
(source)
css3-background-clip-content-box.html
(live test)
(source)
css3-background-clip-padding-box.html
(live test)
(source)
css3-background-clip.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
local-attachment-content-box-scroll.html
(live test)
(source)
background-clip-computed.html
(live test)
(source)
background-clip-invalid.html
(live test)
(source)
background-clip-valid.html
(live test)
(source)
Determines the
background painting area
which determines the area within which the background is painted.
The syntax of the property is given with
[ border-area
||
text ]
Or should this be defining the
-webkit-background-clip
property,
saying that all the values are identical,
with this additional
text
value?
The background is painted within (clipped to)
the specified box of the element.
text
The background is painted within (clipped to)
the intersection of the border box
and the geometry of the text including any decorations and
emphasis marks
in the element and its
in-flow
and floated descendants.
The text color has no effect on the painting of the background.
border-area
The background is clipped to the area painted by the border,
taking
border-width
and
border-style
into account but ignoring any transparency introduced by
border-color
If both
border-area
and
text
are specified,
the background is painted within (clipped to) the union of these two areas.
Note:
The root element has a different
background painting area
and thus the
background-clip
property has no effect when specified on it.
See
§ 4 Backgrounds of Special Elements
Note:
The background is always drawn
behind
the border, if any.
See “Elaborate description of Stacking Contexts” in
[CSS2]
Appendix E.
See
CSS Borders and Box Decorations 4
§ 3.7 Corner Shaping: the corner-*-shape properties
for how
border-radius
affects
the shape of the
background painting area
See
§ 3 Layering Multiple Background Images
for how
background-clip
interacts
with other comma-separated background properties
to form each
background image layer
2.9.
Positioning Area: the
background-origin
property
Name:
background-origin
Value:
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
Tests
discrete-no-interpolation.html
(live test)
(source)
background-position-origin-interpolation.html
(live test)
(source)
background-gradient-subpixel-fills-area.html
(live test)
(source)
background-origin-001.html
(live test)
(source)
background-origin-002.html
(live test)
(source)
background-origin-003.html
(live test)
(source)
background-origin-004.html
(live test)
(source)
background-origin-005.html
(live test)
(source)
background-origin-006.html
(live test)
(source)
background-origin-007.html
(live test)
(source)
background-origin-008.html
(live test)
(source)
origin-border-box.html
(live test)
(source)
origin-border-box_with_position.html
(live test)
(source)
origin-border-box_with_radius.html
(live test)
(source)
origin-border-box_with_size.html
(live test)
(source)
origin-content-box.html
(live test)
(source)
origin-content-box_with_position.html
(live test)
(source)
origin-content-box_with_radius.html
(live test)
(source)
origin-content-box_with_size.html
(live test)
(source)
origin-padding-box.html
(live test)
(source)
origin-padding-box_with_position.html
(live test)
(source)
origin-padding-box_with_radius.html
(live test)
(source)
origin-padding-box_with_size.html
(live test)
(source)
css3-background-origin-border-box.html
(live test)
(source)
css3-background-origin-content-box.html
(live test)
(source)
css3-background-origin-padding-box.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
background-origin-computed.html
(live test)
(source)
background-origin-invalid.html
(live test)
(source)
background-origin-valid.html
(live test)
(source)
This property determines the
background positioning area
the area within which any background images are positioned.
For elements rendered as multiple
box fragments
(e.g., inline boxes on several lines, boxes on several pages),
specifies which boxes
box-decoration-break
[CSS-BREAK-3]
operates on
to determine the background positioning area(s).
padding-box
The position is relative to the
padding box
(For single boxes
0 0
is the upper left corner of the padding edge,
100% 100%
is the lower right corner.)
border-box
The position is relative to the
border box
content-box
The position is relative to the
content box
If the
background-attachment
value for this
layer
is
fixed
then this property has no effect:
in this case the
background positioning area
is
the
initial containing block
Note:
If
background-clip
is
padding-box
background-origin
is
border-box
background-position
is
top left
(the initial value),
and the element has a non-zero border,
then the top and left edges of the
background image
will be clipped.
See
§ 3 Layering Multiple Background Images
for how
background-origin
interacts
with other comma-separated background properties
to form each
background image layer
2.10.
Sizing Images: the
background-size
property
Name:
background-size
Value:
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
value
Canonical order:
per grammar
Animation type:
repeatable list
Tests
background-size-composition.html
(live test)
(source)
background-size-interpolation.html
(live test)
(source)
background-size-001.html
(live test)
(source)
background-size-002.html
(live test)
(source)
background-size-005.html
(live test)
(source)
background-size-006.html
(live test)
(source)
background-size-007.html
(live test)
(source)
background-size-008.html
(live test)
(source)
background-size-009.html
(live test)
(source)
background-size-010.html
(live test)
(source)
background-size-011.html
(live test)
(source)
background-size-012.html
(live test)
(source)
background-size-013.html
(live test)
(source)
background-size-014.html
(live test)
(source)
background-size-015.html
(live test)
(source)
background-size-016.html
(live test)
(source)
background-size-017.html
(live test)
(source)
background-size-018.html
(live test)
(source)
background-size-019.html
(live test)
(source)
background-size-020.html
(live test)
(source)
background-size-021.html
(live test)
(source)
background-size-025.html
(live test)
(source)
background-size-026.html
(live test)
(source)
background-size-027.html
(live test)
(source)
background-size-028.html
(live test)
(source)
background-size-029.html
(live test)
(source)
background-size-030.html
(live test)
(source)
background-size-031.html
(live test)
(source)
background-size-034.html
(live test)
(source)
background-size-041.html
(live test)
(source)
background-size-042.html
(live test)
(source)
background-size-043.html
(live test)
(source)
background-size-044.html
(live test)
(source)
background-size-contain-001.html
(live test)
(source)
background-size-contain-002.html
(live test)
(source)
background-size-cover-001.html
(live test)
(source)
background-size-cover-002.html
(live test)
(source)
background-size-cover-003.html
(live test)
(source)
background-size-one-value-1x1-image.html
(live test)
(source)
background-size-percentage-root.html
(live test)
(source)
background-size-with-negative-value.html
(live test)
(source)
background-size-contain-svg-view.html
(live test)
(source)
background-size-contain.xht
(live test)
(source)
background-size-cover-contain-001.xht
(live test)
(source)
background-size-cover-contain-002.xht
(live test)
(source)
background-size-cover-svg-view.html
(live test)
(source)
background-size-cover-svg.html
(live test)
(source)
background-size-cover.xht
(live test)
(source)
background-size-near-zero-color.html
(live test)
(source)
background-size-near-zero-gradient.html
(live test)
(source)
background-size-near-zero-png.html
(live test)
(source)
background-size-near-zero-svg.html
(live test)
(source)
background-size-vector-001.html
(live test)
(source)
background-size-vector-002.html
(live test)
(source)
background-size-vector-003.html
(live test)
(source)
background-size-vector-004.html
(live test)
(source)
background-size-vector-005.html
(live test)
(source)
background-size-vector-006.html
(live test)
(source)
background-size-vector-007.html
(live test)
(source)
background-size-vector-008.html
(live test)
(source)
background-size-vector-009.html
(live test)
(source)
background-size-vector-010.html
(live test)
(source)
background-size-vector-011.html
(live test)
(source)
background-size-vector-012.html
(live test)
(source)
background-size-vector-013.html
(live test)
(source)
background-size-vector-014.html
(live test)
(source)
background-size-vector-015.html
(live test)
(source)
background-size-vector-016.html
(live test)
(source)
background-size-vector-017.html
(live test)
(source)
background-size-vector-018.html
(live test)
(source)
background-size-vector-019.html
(live test)
(source)
background-size-vector-020.html
(live test)
(source)
background-size-vector-021.html
(live test)
(source)
background-size-vector-022.html
(live test)
(source)
background-size-vector-023.html
(live test)
(source)
background-size-vector-024.html
(live test)
(source)
background-size-vector-025.html
(live test)
(source)
background-size-vector-026.html
(live test)
(source)
background-size-vector-027.html
(live test)
(source)
background-size-vector-028.html
(live test)
(source)
background-size-vector-029.html
(live test)
(source)
diagonal-percentage-vector-background.html
(live test)
(source)
tall--auto--omitted-width-percent-height.html
(live test)
(source)
tall--auto--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--auto--percent-width-nonpercent-height.html
(live test)
(source)
tall--auto--percent-width-omitted-height-viewbox.html
(live test)
(source)
tall--auto--percent-width-omitted-height.html
(live test)
(source)
tall--auto--percent-width-percent-height-viewbox.html
(live test)
(source)
tall--auto--percent-width-percent-height.html
(live test)
(source)
tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--auto-32px--nonpercent-width-nonpercent-height.html
(live test)
(source)
tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
tall--auto-32px--nonpercent-width-omitted-height.html
(live test)
(source)
tall--auto-32px--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
tall--auto-32px--nonpercent-width-percent-height.html
(live test)
(source)
tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--auto-32px--omitted-width-nonpercent-height.html
(live test)
(source)
tall--auto-32px--omitted-width-omitted-height-viewbox.html
(live test)
(source)
tall--auto-32px--omitted-width-omitted-height.html
(live test)
(source)
tall--auto-32px--omitted-width-percent-height-viewbox.html
(live test)
(source)
tall--auto-32px--omitted-width-percent-height.html
(live test)
(source)
tall--auto-32px--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--auto-32px--percent-width-nonpercent-height.html
(live test)
(source)
tall--auto-32px--percent-width-omitted-height-viewbox.html
(live test)
(source)
tall--auto-32px--percent-width-omitted-height.html
(live test)
(source)
tall--auto-32px--percent-width-percent-height-viewbox.html
(live test)
(source)
tall--auto-32px--percent-width-percent-height.html
(live test)
(source)
tall--contain--height.html
(live test)
(source)
tall--contain--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--contain--nonpercent-width-nonpercent-height.html
(live test)
(source)
tall--contain--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
tall--contain--nonpercent-width-omitted-height.html
(live test)
(source)
tall--contain--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
tall--contain--nonpercent-width-percent-height.html
(live test)
(source)
tall--contain--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--contain--omitted-width-nonpercent-height.html
(live test)
(source)
tall--contain--omitted-width-omitted-height-viewbox.html
(live test)
(source)
tall--contain--omitted-width-omitted-height.html
(live test)
(source)
tall--contain--omitted-width-percent-height-viewbox.html
(live test)
(source)
tall--contain--omitted-width-percent-height.html
(live test)
(source)
tall--contain--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--contain--percent-width-nonpercent-height.html
(live test)
(source)
tall--contain--percent-width-omitted-height-viewbox.html
(live test)
(source)
tall--contain--percent-width-omitted-height.html
(live test)
(source)
tall--contain--percent-width-percent-height-viewbox.html
(live test)
(source)
tall--contain--percent-width-percent-height.html
(live test)
(source)
tall--contain--width.html
(live test)
(source)
tall--cover--height.html
(live test)
(source)
tall--cover--nonpercent-width-nonpercent-height--crisp.html
(live test)
(source)
tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
(live test)
(source)
tall--cover--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--cover--nonpercent-width-nonpercent-height.html
(live test)
(source)
tall--cover--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
tall--cover--nonpercent-width-omitted-height.html
(live test)
(source)
tall--cover--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
tall--cover--nonpercent-width-percent-height.html
(live test)
(source)
tall--cover--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--cover--omitted-width-nonpercent-height.html
(live test)
(source)
tall--cover--omitted-width-omitted-height-viewbox.html
(live test)
(source)
tall--cover--omitted-width-omitted-height.html
(live test)
(source)
tall--cover--omitted-width-percent-height-viewbox.html
(live test)
(source)
tall--cover--omitted-width-percent-height.html
(live test)
(source)
tall--cover--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
tall--cover--percent-width-nonpercent-height.html
(live test)
(source)
tall--cover--percent-width-omitted-height-viewbox.html
(live test)
(source)
tall--cover--percent-width-omitted-height.html
(live test)
(source)
tall--cover--percent-width-percent-height-viewbox.html
(live test)
(source)
tall--cover--percent-width-percent-height.html
(live test)
(source)
tall--cover--width.html
(live test)
(source)
wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--12px-auto--nonpercent-width-nonpercent-height.html
(live test)
(source)
wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
wide--12px-auto--nonpercent-width-omitted-height.html
(live test)
(source)
wide--12px-auto--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
wide--12px-auto--nonpercent-width-percent-height.html
(live test)
(source)
wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--12px-auto--omitted-width-nonpercent-height.html
(live test)
(source)
wide--12px-auto--omitted-width-omitted-height-viewbox.html
(live test)
(source)
wide--12px-auto--omitted-width-omitted-height.html
(live test)
(source)
wide--12px-auto--omitted-width-percent-height-viewbox.html
(live test)
(source)
wide--12px-auto--omitted-width-percent-height.html
(live test)
(source)
wide--12px-auto--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--12px-auto--percent-width-nonpercent-height.html
(live test)
(source)
wide--12px-auto--percent-width-omitted-height-viewbox.html
(live test)
(source)
wide--12px-auto--percent-width-omitted-height.html
(live test)
(source)
wide--12px-auto--percent-width-percent-height-viewbox.html
(live test)
(source)
wide--12px-auto--percent-width-percent-height.html
(live test)
(source)
wide--auto--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--auto--nonpercent-width-nonpercent-height.html
(live test)
(source)
wide--auto--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
wide--auto--nonpercent-width-omitted-height.html
(live test)
(source)
wide--auto--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
wide--auto--nonpercent-width-percent-height.html
(live test)
(source)
wide--auto--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--auto--omitted-width-nonpercent-height.html
(live test)
(source)
wide--auto--omitted-width-omitted-height-viewbox.html
(live test)
(source)
wide--auto--omitted-width-omitted-height.html
(live test)
(source)
wide--auto--omitted-width-percent-height-viewbox.html
(live test)
(source)
wide--auto--omitted-width-percent-height.html
(live test)
(source)
wide--auto--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--auto--percent-width-nonpercent-height.html
(live test)
(source)
wide--auto--percent-width-omitted-height-viewbox.html
(live test)
(source)
wide--auto--percent-width-omitted-height.html
(live test)
(source)
wide--auto--percent-width-percent-height-viewbox.html
(live test)
(source)
wide--auto--percent-width-percent-height.html
(live test)
(source)
wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--auto-32px--nonpercent-width-nonpercent-height.html
(live test)
(source)
wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
wide--auto-32px--nonpercent-width-omitted-height.html
(live test)
(source)
wide--auto-32px--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
wide--auto-32px--nonpercent-width-percent-height.html
(live test)
(source)
wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--auto-32px--omitted-width-nonpercent-height.html
(live test)
(source)
wide--auto-32px--omitted-width-omitted-height-viewbox.html
(live test)
(source)
wide--auto-32px--omitted-width-omitted-height.html
(live test)
(source)
wide--auto-32px--omitted-width-percent-height-viewbox.html
(live test)
(source)
wide--auto-32px--omitted-width-percent-height.html
(live test)
(source)
wide--auto-32px--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--auto-32px--percent-width-nonpercent-height.html
(live test)
(source)
wide--auto-32px--percent-width-omitted-height-viewbox.html
(live test)
(source)
wide--auto-32px--percent-width-omitted-height.html
(live test)
(source)
wide--auto-32px--percent-width-percent-height-viewbox.html
(live test)
(source)
wide--auto-32px--percent-width-percent-height.html
(live test)
(source)
wide--contain--height.html
(live test)
(source)
wide--contain--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--contain--nonpercent-width-nonpercent-height.html
(live test)
(source)
wide--contain--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
wide--contain--nonpercent-width-omitted-height.html
(live test)
(source)
wide--contain--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
wide--contain--nonpercent-width-percent-height.html
(live test)
(source)
wide--contain--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--contain--omitted-width-nonpercent-height.html
(live test)
(source)
wide--contain--omitted-width-omitted-height-viewbox.html
(live test)
(source)
wide--contain--omitted-width-omitted-height.html
(live test)
(source)
wide--contain--omitted-width-percent-height-viewbox.html
(live test)
(source)
wide--contain--omitted-width-percent-height.html
(live test)
(source)
wide--contain--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--contain--percent-width-nonpercent-height.html
(live test)
(source)
wide--contain--percent-width-omitted-height-viewbox.html
(live test)
(source)
wide--contain--percent-width-omitted-height.html
(live test)
(source)
wide--contain--percent-width-percent-height-viewbox.html
(live test)
(source)
wide--contain--percent-width-percent-height.html
(live test)
(source)
wide--contain--width.html
(live test)
(source)
wide--cover--height.html
(live test)
(source)
wide--cover--nonpercent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--cover--nonpercent-width-nonpercent-height.html
(live test)
(source)
wide--cover--nonpercent-width-omitted-height-viewbox.html
(live test)
(source)
wide--cover--nonpercent-width-omitted-height.html
(live test)
(source)
wide--cover--nonpercent-width-percent-height-viewbox.html
(live test)
(source)
wide--cover--nonpercent-width-percent-height.html
(live test)
(source)
wide--cover--omitted-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--cover--omitted-width-nonpercent-height.html
(live test)
(source)
wide--cover--omitted-width-omitted-height-viewbox.html
(live test)
(source)
wide--cover--omitted-width-omitted-height.html
(live test)
(source)
wide--cover--omitted-width-percent-height-viewbox.html
(live test)
(source)
wide--cover--omitted-width-percent-height.html
(live test)
(source)
wide--cover--percent-width-nonpercent-height-viewbox.html
(live test)
(source)
wide--cover--percent-width-nonpercent-height.html
(live test)
(source)
wide--cover--percent-width-omitted-height-viewbox.html
(live test)
(source)
wide--cover--percent-width-omitted-height.html
(live test)
(source)
wide--cover--percent-width-percent-height-viewbox.html
(live test)
(source)
wide--cover--percent-width-percent-height.html
(live test)
(source)
wide--cover--width.html
(live test)
(source)
zero-height-ratio-5px-auto.html
(live test)
(source)
zero-height-ratio-auto-5px.html
(live test)
(source)
zero-height-ratio-auto-auto.html
(live test)
(source)
zero-height-ratio-contain.html
(live test)
(source)
zero-height-ratio-cover.html
(live test)
(source)
zero-ratio-no-dimensions-5px-auto.html
(live test)
(source)
zero-ratio-no-dimensions-auto-5px.html
(live test)
(source)
zero-ratio-no-dimensions-auto-auto.html
(live test)
(source)
zero-ratio-no-dimensions-contain.html
(live test)
(source)
zero-ratio-no-dimensions-cover.html
(live test)
(source)
zero-width-ratio-5px-auto.html
(live test)
(source)
zero-width-ratio-auto-5px.html
(live test)
(source)
zero-width-ratio-auto-auto.html
(live test)
(source)
zero-width-ratio-contain.html
(live test)
(source)
zero-width-ratio-cover.html
(live test)
(source)
css3-background-size-001.html
(live test)
(source)
css3-background-size-contain.html
(live test)
(source)
css3-background-size.html
(live test)
(source)
inheritance.sub.html
(live test)
(source)
subpixel-repeat-no-repeat-mix.html
(live test)
(source)
background-size-computed.html
(live test)
(source)
background-size-invalid.html
(live test)
(source)
background-size-valid.html
(live test)
(source)
This property specifies the size of each
background image
The property’s value is given as a comma-separated list
of
values where
= [
auto ]
{1,2}
cover
contain
Values have the following meanings:
contain
Scale the image, while preserving its
natural aspect ratio
(if any),
to the largest size such that both its width and its height
can fit inside the
background positioning area
cover
Scale the image, while preserving its
natural aspect ratio
(if any),
to the smallest size such that both its width and its height
can completely cover the
background positioning area
auto
]{1,2}
The first value gives the width of the corresponding image,
the second value its height.
If only one value is given
the second is assumed to be
auto
is relative to the
background positioning area
An
auto
value for one dimension
is resolved by using the image’s
natural aspect ratio
and the size of the other dimension,
or failing that, using the image’s
natural size
or failing that, treating it as
100%
If both values are
auto
then the
natural width
and/or
height
of the image
should be used, if any,
the missing dimension (if any) behaving as
auto
as described above.
If the image has neither
natural size
its size is determined as for
contain
Negative values are invalid.
Here are some examples.
The first example stretches the background image
independently in both dimensions
to completely cover the content area:
div {
background-image: url(plasma.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
The second example stretches the image
so that exactly two copies fit horizontally.
The aspect ratio is preserved:
p {
background-image: url(tubes.png);
background-size: 50% auto;
background-origin: border-box;
This example forces the background image to be 15 by 15 pixels:
p {
background-size: 15px 15px;
background-image: url(tile.png);
This example uses the image’s natural size.
Note that this is the only possible behavior in CSS level 1 and 2.
body {
background-size: auto; /* default */
background-image: url(flower.png);
The following example rounds the height of the image to 33.3%,
up from the specified value of 30%.
At 30%, three images would fit entirely and a fourth only partially.
After rounding, three images fit exactly.
The width of the image is 20% of the background positioning area width
and is not rounded.
p {
background-image: url(chain.png);
background-repeat: no-repeat round;
background-size: 20% 30%;
If
background-repeat
is
round
for one (or both) dimensions,
there is a second step.
The UA must scale the image in that dimension (or both dimensions)
so that it fits a whole number of times in the
background positioning area
In the case of the width (height is analogous):
If
≠ 0 is the width of the image after step one
and
is the width of the background positioning area,
then the rounded width
X'
/ round(
where round() is a function that returns the nearest natural number
(integer greater than zero).
If
background-repeat
is
round
for one dimension only
and if
background-size
is
auto
for the other dimension,
then there is a third step:
that other dimension is scaled so that the original aspect ratio is restored.
In this example the background image is shown at its natural size:
div {
background-image: url(image1.png);
background-repeat: repeat; /* default */
background-size: auto; /* default */
In the following example, the background is shown with a width of
3em and its height is scaled proportionally to keep the original
aspect ratio:
div {
background-image: url(image2.png);
background-repeat: repeat; /* default */
background-size: 3em; /* = '3em auto' */
In the following example,
the background is shown with a width of approximately 3em:
scaled so that it fits a whole number of times in the width of the background.
The height is scaled proportionally to keep the original aspect ratio:
div {
background-image: url(image3.png);
background-repeat: round repeat;
background-size: 3em auto;
In the following example, the background image is shown
with a width of 3em and a height that is either
the height corresponding to that width at the original aspect ratio
or slightly less:
div {
background-image: url(image4.png);
background-repeat: repeat round;
background-size: 3em auto;
In the following example,
the background image is shown with a height of approximately 4em:
scaled slightly so that it fits a whole number of times in the background height.
The width is the approximately the width that corresponds to
a 4em height at the original aspect ratio:
scaled slightly so that it fits a whole number of times
in the background width.
div {
background-image: url(image5.png);
background-repeat: round;
background-size: auto 4em;
If the background image’s width or height resolves to zero,
this causes the image not to be displayed.
(The effect is the same as if it had been a transparent image.)
See
§ 3 Layering Multiple Background Images
for how
background-size
interacts
with other comma-separated background properties
to form each
background image layer
2.10.1.
Serialization of
background-size
values
The
specified value
and
computed value
of the
type
always serialize as two values, even when the second value is
auto
due to the
shortest, most backwards-compatible serialization principle
2.11.
Background Image Layers: the
background-tbd
shorthand property
Not Ready For Implementation
This section is not yet ready for implementation.
It exists in this repository to record the ideas and promote discussion.
Before attempting to implement anything of this section,
please contact the CSSWG at www-style@w3.org.
Name:
background-tbd
Value:
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
The
background-tbd
property is a
shorthand property
that sets all the same properties as the
background
shorthand
except for
background-color
allowing authors to easily declare and position background images
while letting
background-color
cascade through independently.
The name of this property is discussed in
issue 9083
This example sets two background layers later in the cascade.
By using
background-tbd
, the previously set
background-color
won’t be overridden.
background-color
green
background-tbd
url
a.png
top left
url
b.png
top left no-repeat
This example tries to set the background color in addition to
the background image. But for that to work,
background
needs to be used instead of
background-tbd
So the
background-tbd
declaration will be dropped.
background
url
pass.png
green
/* valid */
background-tbd:
url
fail.png
red
/* invalid */
2.12.
Backgrounds Shorthand: the
background
property
Name:
background
Value:
Initial:
see individual properties
Applies to:
all elements
Inherited:
no
Percentages:
see individual properties
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
Tests
background-331.html
(live test)
(source)
background-332.html
(live test)
(source)
background-333.html
(live test)
(source)
background-334.html
(live test)
(source)
background-335.html
(live test)
(source)
background-336.html
(live test)
(source)
background-computed.html
(live test)
(source)
background-invalid.html
(live test)
(source)
background-shorthand-serialization.html
(live test)
(source)
background-valid.html
(live test)
(source)
The
background
property is a
shorthand property
for setting most background properties at the same place in the style sheet.
The number of comma-separated items defines the number of
background image layers
Given a valid declaration, for each layer
the shorthand first sets the corresponding value of each of
background-image
background-position
background-size
background-repeat
background-origin
background-clip
and
background-attachment
to
that property’s
initial value
then assigns any explicit values
specified for this layer in the declaration.
Finally
background-color
is set to the specified color, if any,
else set to its initial value.
This property’s value is given as a comma-separated list
of values where
||
[ /
||
||
||
||
||
[ /
||
||
||
||
||
<'background-color'>
Note:
A color is permitted in
, but not in
If one
value is present,
then it sets both
background-origin
and
background-clip
to that value.
However, if a value is set that is only valid in
background-clip
then it sets
background-clip
to that value and
background-origin
to
border-box
If two
values are present,
then the first sets
background-origin
and the second
background-clip
In the first rule of the following example, only a value for
background-color
has been given and the
other individual properties are set to their initial values. In the
second rule, many individual properties have been specified.
body { background: red }
p { background: url("chess.png") 40% / 10em gray
round fixed border-box; }
The first rule is equivalent to:
body {
background-color: red;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: none }
The second is equivalent to:
p {
background-color: gray;
background-position: 40% 50%;
background-size: 10em auto;
background-repeat: round;
background-clip: border-box;
background-origin: border-box;
background-attachment: fixed;
background-image: url(chess.png);
The following example shows how a both
a background color (
#CCC
) and a background image (
url(metal.jpg)
are set.
The image is rescaled to the full width of the element:
E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
Another example shows equivalence:
div {
background: padding-box url(paper.jpg) white center;
div {
background-color: white;
background-image: url(paper.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-position: center;
background-clip: padding-box;
background-origin: padding-box;
background-size: auto auto;
The following declaration with multiple, comma-separated values
background: url(a.png) top left no-repeat,
url(b.png) center / 100% 100% no-repeat,
url(c.png) white;
is equivalent to
background-image: url(a.png), url(b.png), url(c.png);
background-position: top left, center, top left;
background-repeat: no-repeat, no-repeat, repeat;
background-clip: border-box, border-box, border-box;
background-origin: padding-box, padding-box, padding-box;
background-size: auto auto, 100% 100%, auto auto;
background-attachment: scroll, scroll, scroll;
background-color: white;
3.
Layering Multiple Background Images
The background of a box can have multiple
background image layers
The number of layers is determined by
the number of comma-separated values in the
background-image
property.
Note that a value of
none
still creates a layer.
Tests
background-none-none-and-color.html
(live test)
(source)
order-of-images.htm
(live test)
(source)
scroll-positioned-multiple-background-images.html
(live test)
(source)
Each of the
background images
is sized, positioned, and tiled
according to the corresponding value in the other background properties.
The lists are matched up from the first value:
excess values at the end are not used.
If a property doesn’t have enough comma-separated values
to match the number of layers,
the
UA
must calculate its
used value
by repeating the list of values until there are enough.
For example, this set of declarations:
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;
has exactly the same effect as this set,
with the extra position dropped
and the missing values for
background-origin
and
background-repeat
filled in (emphasized for clarity):
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box
, border-box
background-repeat: no-repeat
, no-repeat, no-repeat
The first image in the list is the
layer
closest to the user,
the next one is painted behind the first, and so on.
The background color, if present,
is painted below all of the other
layers
Note:
The
border-image properties
can also define a background image,
which, if present, is painted on top of
the background
layers
created by the background properties.
4.
Backgrounds of Special Elements
The document
canvas
is the infinite surface over which the document is rendered.
[CSS2]
Since no element corresponds to the canvas,
in order to allow styling of the canvas
CSS propagates the background of the
root element
(or, in the case of HTML, the
as described below.
However, if the element whose background would be used for the canvas
is
display: none
then the
canvas background
is transparent.
If the
canvas background
is not opaque,
the
canvas surface
below it shows through.
The texture of the
canvas surface
is UA-dependent
(but is typically an opaque white).
4.1.
The Canvas Background and the Root Element
The background of the
root element
becomes the
canvas background
and its
background painting area
extends
to cover the entire
canvas
However, any images are sized and positioned relative to the root element’s box
as if they were painted for that element alone.
(In other words, the
background
positioning
area
is determined as for the root element.)
The root element does not paint this background again,
i.e., the
used value
of its background is
transparent
Tests
background-margin-iframe-root.html
(live test)
(source)
background-margin-root.html
(live test)
(source)
background-margin-transformed-root.html
(live test)
(source)
background-margin-will-change-root.html
(live test)
(source)
4.2.
The Canvas Background and the HTML Element
For documents whose root element is
an HTML
HTML
element
or an XHTML
html
element
[HTML]
if the
computed value
of
background-image
on the
root element
is
none
and its
background-color
is
transparent
user agents must instead propagate
the
computed values
of the background properties
from that element’s first
HTML
BODY
or XHTML
body
child element.
The
used values
of that
BODY
element’s background properties
are their
initial values
and the propagated values are treated
as if they were specified on the root element.
It is recommended that authors of HTML documents specify the canvas background
using the
BODY
element
rather than the
HTML
element.
Tests
document-canvas-remove-body.html
(live test)
(source)
Note:
Using
containment
disables
this special handling of the HTML
body
element.
See the
CSS Containment 1
§ 2 Strong Containment: the contain property
for details.
According to these rules, the canvas underlying the following HTML document
will have a “marble” background:
My background is marble.
4.3.
The
::first-line
Pseudo-element‘s Background
The
::first-line
pseudo-element
is like an inline-level element
for the purposes of the background
(see section 5.12.1 of
[CSS2]
).
That means, e.g., that in a left-justified first line,
the background does not necessarily extend
all the way to the right edge.
Tests
linear-gradient-currentcolor-first-line.html
(live test)
(source)
5.
Changes
5.1.
Additions since
[CSS3BG]
turned
background-position
into a shorthand and added physical and logical longhands
added logical keywords to
added
border-area
and
text
values to
background-clip
added
background-tbd
added
background-repeat-*
longhands
added logical keywords
repeat-block
and
repeat-inline
to
background-repeat
6.
Acknowledgments
In addition to the many contributors to the
[CSS1]
[CSS2]
and
[CSS3BG]
predecessors to this module,
the editors would like to thank
Tab Atkins,
and Håkon Wium Lie
for their suggestions and feedback specifically for this Level 4.
Privacy Considerations
No new privacy considerations have been reported on this specification.
Security Considerations
No new security considerations have been reported on this specification.
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
, in § 2.5
auto
, in § 2.10
background
, in § 2.12
background-attachment
, in § 2.5
background-clip
, in § 2.8
background color
, in § 2.1
background-color
, in § 2.1
background image
, in § 2.2
background-image
, in § 2.2
background image layer
, in § 3
background-origin
, in § 2.9
background painting area
, in § 2.8
background-position
, in § 2.7
background-position-block
, in § 2.6
background positioning area
, in § 2.9
background-position-inline
, in § 2.6
background-position-x
, in § 2.6
background-position-y
, in § 2.6
background-repeat
, in § 2.4
background-repeat-block
, in § 2.3
background-repeat-inline
, in § 2.3
background-repeat-x
, in § 2.3
background-repeat-y
, in § 2.3
background-size
, in § 2.10
background-tbd
, in § 2.11
, in § 2.8
, in § 2.2
, in § 2.12
, in § 2.7
, in § 2.10
border-area
, in § 2.8
border-box
, in § 2.9
bottom
, in § 2.6
canvas background
, in § 4.1
canvas surface
, in § 4
center
, in § 2.6
contain
, in § 2.10
content-box
, in § 2.9
cover
, in § 2.10
, in § 2.12
fixed
, in § 2.5
image
, in § 2.2
layer
, in § 3
left
, in § 2.6
, in § 2.6
, in § 2.10
local
, in § 2.5
none
, in § 2.2
no-repeat
, in § 2.3
padding-box
, in § 2.9
, in § 2.6
, in § 2.7
repeat
, in § 2.3
repeat-block
, in § 2.4
repeat-inline
, in § 2.4
, in § 2.4
repeat-x
, in § 2.4
repeat-y
, in § 2.4
, in § 2.3
right
, in § 2.6
round
, in § 2.3
scroll
, in § 2.5
space
, in § 2.3
text
, in § 2.8
top
, in § 2.6
, in § 2.8
Terms defined by reference
[CSS-2023]
defines the following terms:
UA
[CSS-ALIGN-3]
defines the following terms:
alignment container
alignment subject
[CSS-BORDERS-4]
defines the following terms:
border-color
border-image
border-radius
border-style
border-width
[CSS-BOX-4]
defines the following terms:
border
border area
border box
content area
content box
margin
padding
padding area
padding box
padding edge
[CSS-BREAK-4]
defines the following terms:
box fragment
box-decoration-break
[CSS-CASCADE-5]
defines the following terms:
computed value
initial value
longhand property
shorthand property
specified value
used value
[CSS-COLOR-4]
defines the following terms:
transparent
[CSS-COLOR-5]
defines the following terms:
[CSS-CONTAIN-2]
defines the following terms:
containment
[CSS-CONTENT-3]
defines the following terms:
content
[CSS-DISPLAY-4]
defines the following terms:
display
in-flow
initial containing block
root element
[CSS-IMAGES-3]
defines the following terms:
natural aspect ratio
natural height
natural size
natural width
[CSS-OVERFLOW-3]
defines the following terms:
scroll container
scrollable overflow area
[CSS-PSEUDO-4]
defines the following terms:
::first-letter
::first-line
[CSS-VALUES-4]
defines the following terms:
&&
CSS-wide keywords
{A,B}
||
[CSS-VALUES-5]
defines the following terms:
[CSS-WRITING-MODES-4]
defines the following terms:
block axis
inline axis
[CSS2]
defines the following terms:
viewport
[CSS3BG]
defines the following terms:
border-box
padding-box
round
space
[HTML]
defines the following terms:
body
[MEDIAQUERIES-5]
defines the following terms:
paged media
[SELECTORS-4]
defines the following terms:
pseudo-elements
References
Normative References
[CSS-2023]
Chris Lilley; et al.
CSS Snapshot 2023
. 7 December 2023. NOTE. URL:
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr..
CSS Box Alignment Module Level 3
. 30 January 2026. WD. URL:
[CSS-BORDERS-4]
Elika Etemad; et al.
CSS Borders and Box Decorations Module Level 4
. 16 December 2025. WD. URL:
[CSS-BOX-3]
Elika Etemad.
CSS Box Model Module Level 3
. 11 April 2024. REC. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. 4 August 2024. WD. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. 18 December 2018. FPWD. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. 13 January 2022. CR. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. 14 April 2026. CRD. URL:
[CSS-COLOR-5]
Chris Lilley; Una Kravets; Lea Verou.
CSS Color Module Level 5
. 13 April 2026. WD. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. 6 November 2025. WD. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. 18 December 2023. CRD. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. 7 October 2025. WD. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 27 June 2025. WD. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. 22 March 2024. CRD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne.
CSS Values and Units Module Level 5
. 11 November 2024. WD. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. 30 July 2019. CR. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. 7 June 2011. REC. URL:
[CSS3BG]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. 11 March 2024. CRD. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[MEDIAQUERIES-5]
Tab Atkins Jr.; et al.
Media Queries Level 5
. 19 February 2026. WD. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr..
Selectors Level 4
. 22 January 2026. WD. URL:
Non-Normative References
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 3
. 4 December 2018. CR. URL:
[CSS-CONTAIN-1]
Tab Atkins Jr.; Florian Rivoal.
CSS Containment Module Level 1
. 25 June 2024. REC. URL:
[CSS-CONTAIN-2]
Tab Atkins Jr.; Florian Rivoal; Vladimir Levin.
CSS Containment Module Level 2
. 17 September 2022. WD. URL:
[CSS-CONTENT-3]
Elika Etemad; Mike Bremford.
CSS Generated Content Module Level 3
. 4 December 2025. WD. URL:
[CSS1]
Håkon Wium Lie; Bert Bos.
Cascading Style Sheets, level 1
. 13 September 2018. REC. URL:
[WCAG20]
Ben Caldwell; et al.
Web Content Accessibility Guidelines (WCAG) 2.0
. 11 December 2008. REC. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
Logical property group
background
see individual properties
all elements
no
see individual properties
see individual properties
per grammar
see individual properties
background-attachment
scroll
all elements
no
N/A
discrete
per grammar
list, each item the keyword as specified
background-clip
border-box
all elements
no
n/a
repeatable list
per grammar
as specified
background-color
transparent
all elements
no
N/A
by computed value
per grammar
computed color
background-image
none
all elements
no
N/A
discrete
per grammar
list, each item either an
background-origin
padding-box
all elements
no
N/A
repeatable list
per grammar
list, each item a keyword as specified
background-position
0% 0%
all elements
no
refer to size of background positioning area
minus size of background image; see text
repeatable list
per grammar
a list,
each item a pair of offsets (horizontal and vertical) from the top left origin,
each offset given as a computed
background-position-block
[ center | [ [ start | end ]?
0%
all elements
no
refer to size of background positioning area minus size of background image
repeatable list
per grammar
A list, each item consisting of: an offset given as a computed
background-position
background-position-inline
[ center | [ [ start | end ]?
0%
all elements
no
refer to inline-size of background positioning area minus inline-size of background image
repeatable list
per grammar
A list, each item consisting of: an offset given as a computed
background-position
background-position-x
[ center | [ [ left | right | x-start | x-end ]?
0%
all elements
no
refer to width of background positioning area minus width of background image
repeatable list
per grammar
A list, each item consisting of: an offset given as a computed
background-position
background-position-y
[ center | [ [ top | bottom | y-start | y-end ]?
0%
all elements
no
refer to height of background positioning area minus height of background image
repeatable list
per grammar
A list, each item consisting of: an offset given as a computed
background-position
background-repeat
repeat
all elements
no
N/A
discrete
per grammar
list, each item a pair of keywords, one per dimension
background-repeat-block
repeat
all elements
no
N/A
discrete
per grammar
as specified
background-repeat
background-repeat-inline
repeat
all elements
no
N/A
discrete
per grammar
as specified
background-repeat
background-repeat-x
repeat
all elements
no
N/A
discrete
per grammar
as specified
background-repeat
background-repeat-y
repeat
all elements
no
N/A
discrete
per grammar
as specified
background-repeat
background-size
auto
all elements
no
see text
repeatable list
per grammar
list,
each item a pair of sizes (one per axis)
each represented as either a keyword or a computed
background-tbd
see individual properties
all elements
no
see individual properties
see individual properties
per grammar
see individual properties
Issues Index
Should a
'background-repeat: extend'
be added?
This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
Specify how the
longhand properties
are set.
[Issue #9690]
Or should this be defining the
-webkit-background-clip
property,
saying that all the values are identical,
with this additional
text
value?
The name of this property is discussed in
issue 9083