8000 csswg-drafts/css-backgrounds/Overview.src.html at 7a95710427baac12b039b14fa08afbe760d82bd1 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
3537 lines (3039 loc) · 127 KB

Overview.src.html

File metadata and controls

3537 lines (3039 loc) · 127 KB
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html lang="en">
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>CSS Backgrounds and Borders Module Level 3</title>
<link rel=contents href="#contents">
<link rel=index href="#index">
<link rel="stylesheet" type="text/css" href="../default.css">
<style type="text/css">
.prod { font-family: inherit; font-size: inherit }
pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
code { font-size: inherit; }
pre { text-align: left; }
#box-shadow-samples td { background: white; color: black; }
.css::before, .css::after, .property::before, .property::after { content: none !important;}
</style>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
<script defer="defer"
src="http://test.csswg.org/harness/annotate.js#css-backgrounds-3_dev"
type="text/javascript"></script>
</head>
<body>
<div class="head">
<!--logo-->
<h1>CSS Backgrounds and Borders Module Level 3</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:
<dd><a href="[VERSION]">[VERSION]</a>
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css3-background/">[LATEST]</a>
<dt>Latest editor's draft:
<dd><a href="http://dev.w3.org/csswg/css3-background/">http://dev.w3.org/csswg/css3-background/</a>
<dt>Previous version:
<dd><a href="http://www.w3.org/TR/2014/WD-css3-background-20140116/">http://www.w3.org/TR/2014/WD-css3-background-20140116/</a>
<dt>Issue Tracking:
<dd><a href="http://www.w3.org/Style/CSS/Tracker/products/11">http://www.w3.org/Style/CSS/Tracker/products/11</a>
<dt>Feedback:</dt>
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-backgrounds%5D%20feedback"
>www-style@w3.org</a>
with subject line &ldquo;<kbd>[css-backgrounds]
<var>&hellip; message topic &hellip;</var></kbd>&rdquo;
(<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"
>archives</a>)
<dt id="editors-list">Editors:
<dd><a href="mailto:bert@w3.org">Bert Bos</a> (<a
href="http://www.w3.org/">W3C</a>)
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (Mozilla)
<dd><a href="mailto:brad.kemper@gmail.com">Brad Kemper</a> (Invited Expert)
<dt>Latest test suite:
<dd><a href="http://test.csswg.org/suites/css3-background/nightly-unstable/">http://test.csswg.org/suites/css3-background/nightly-unstable/</a>
</dl>
<!--copyright-->
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>CSS is a language for describing the rendering of structured
<span>documents</span> (such as HTML
and XML) on screen, on paper, in speech, etc.
This draft contains the features of CSS level&nbsp;3 relating to
borders and backgrounds. It includes and extends the functionality of
CSS level&nbsp;2 [[!CSS21]], which builds on CSS level&nbsp;1
[[CSS1]]. The main extensions compared to level&nbsp;2 are borders
consisting of images, boxes with multiple backgrounds, boxes with
rounded corners and boxes with shadows.
<p>This module replaces two earlier drafts: CSS3 Backgrounds and CSS3
Border.
<h2 class="no-num no-toc" id="status">Status of this document</h2>
<!--status-->
<p>The following features are at-risk and may be dropped at the
end of the CR period if there has not been enough interest from
implementers: animatability of 'box-shadow'
<p>The CSS WG maintains an <a href="http://www.w3.org/Style/CSS/Tracker/products/11">issues
list</a> for this module. A <a href="http://www.w3.org/Style/CSS/Test/">test
suite</a> and implementation report for CSS Backgrounds and Borders Level 3
will be developed during the Candidate Recommendation phase, which will last
a minimum of three months, and at least until 25 July 2012. See the
section <a href="#exit">“CR exit criteria”</a> for more details.
<p>The changes to this specification since the previous drafts are
listed in the <a href="#changes" >“Changes”</a> section.
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
<!--toc-->
<h2 id="introduction">Introduction</h2>
<p><em>This subsection is not normative.</em>
<p>When elements are rendered according to the
<a href="http://www.w3.org/TR/CSS21/box.html">CSS box model</a> [[!CSS21]],
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, a 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.)
<div class="figure">
<p><img src="box" alt="Diagram of a typical box, showing the
content, padding, border and margin areas">
<p class="caption">The various areas and edges of a typical box.
(This diagram is explained in the CSS2.1 Box Model chapter [[!CSS21]].)
</div>
<p>The properties of this module deal with the decoration of the border
area and with the background of the content, padding and border areas.
Additionally the box may be given a "drop-shadow" effect with the
'box-shadow' property.
<p>If an element is broken into multiple boxes, 'box-decoration-break' [[CSS3-BREAK]]
defines how the borders and background are divided over the various boxes.
(An element can result in more than one box 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.)
<p>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 [[!CSS21]].
<h2 id="values">
Values and Interactions</h2>
<p>This specification follows the
<a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from [[!CSS21]].
<h3 id="placement">
Module Interactions</h3>
<p>This module replaces and extends the background and border
features defined in [[!CSS21]] sections 8.5 and 14.2.
<p>All properties in this module apply to the
<a href="http://www.w3.org/TR/CSS21/selector.html#first-letter"><code>::first-letter</code></a>
pseudo-element. The <a href="#backgrounds">background properties</a>
and <a href="#corners">border-radius properties</a> also apply to the
<a href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo"><code>::first-line</code></a>
pseudo-element. The UA may (but is not required to) apply the
<a href="#border-images">border-image</a> or 'box-shadow' properties to
<code>::first-line</code>. The UA must not apply the
<a href="#borders">border-color/style/width properties</a> to
<code>::first-line</code>. [[!CSS21]]
<h3 id=value-types>
Value Types</h3>
<p>The <dfn><var>&lt;image&gt;</var></dfn> value type is defined by this
specification as <code class=prod><var>&lt;image&gt;</var> =
<var>&lt;uri&gt;</var></code>. Other value types are defined in
CSS Level 2 Revision 1 [[!CSS21]].
Other CSS modules may expand the definitions of these value types: for
example [[CSS3COLOR]], when combined with this module, expands the
definition of the &lt;color&gt; value type as used in this specification.
Similarly, [[CSS3-IMAGES]], when combined with this module,
expands the definition of <var>&lt;image&gt;</var> as used in this specification.
<p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the
<a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
keyword as their property value. For readability it has not been repeated
explicitly.
<h3 id=animations>Animated Values</h3>
<p><!-- <a href="http://www.w3.org/Style/CSS/Tracker/issues/210"
>ISSUE-210.]</a> --> It is expected that CSS will include ways to
animate transitions between styles. (The
section <a
href="http://www.w3.org/TR/css3-transitions/#animatable-types"
>“Animation of property types”</a> of the <cite>CSS Transitions
module</cite> [[CSS3-TRANSITIONS]] is expected to define how different
kinds of values are interpolated during a transition.) In anticipation
of that, this module includes a line “Animatable” for each property,
which specifies whether and how values of the property can be animated.
<h2 id="backgrounds">
Backgrounds</h2>
<p>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.
<p>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'.
<h3 id="layering">
Layering Multiple Background Images</h3>
<p>The background of a box can have multiple <span
class=index>layers</span> in CSS3. 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.
<p>Each of the 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 <span>UA</span> must calculate its used
value by repeating
the list of values until there are enough.
<div class="example">
<p>For example, this set of declarations:
<pre>
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;
</pre>
<p>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):
<pre>
background-image: url(flower.png), url(ball.png), url(grass1.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box<strong>, border-box</strong>;
background-repeat: no-repeat<strong>, no-repeat, no-repeat</strong>;
</pre>
</div>
<p>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.
<p class="note">Note that the <a href="#border-images">border-image properties</a>
can also define a background image, which, if present, is painted on top of
the background created by the background properties.
<h3 id="the-background-color">Base Color: the 'background-color' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-color</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;color&gt;</var>
<tr>
<th>Initial:
<td>transparent
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>the computed color
<tr>
<th>Animatable:
<td>as <a href="http://www.w3.org/TR/css3-transitions/#animtype-color">color</a>
</table>
<p>This property sets the <span class=index
title="color!!background">background color</span> of an element. The
color is drawn behind any background images.
<div class="example">
<p>Example:
<pre>h1 { background-color: #F00 } /* Sets background to red. */</pre>
</div>
<p>The background color is clipped according to the 'background-clip'
value associated with the bottom-most background image layer.
<h3 id="the-background-image">Image Sources: the 'background-image' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-image</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;bg-image&gt;</var>
[ , <var>&lt;bg-image&gt;</var> ]*
<tr>
<th>Initial:
<td>none
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified, but with URIs made absolute
<tr>
<th>Animatable:
<td>no
</table>
<p>This property sets 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.
Where
<pre class=prod><dfn><var>&lt;bg-image&gt;</var></dfn> = <var>&lt;image&gt;</var> | none</pre>
<p>A value of <dfn title="''none''!!'background-image' value">''none''</dfn>
counts as an 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.
<p>See the section <a href="#layering">“Layering multiple background
images”</a> for how 'background-image' interacts with other
comma-separated background properties to form each background image
layer.
<p>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.
<p>For accessibility reasons, authors should not use background images
as the sole method of conveying important information.
See <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F3">Web
Content Accessibility Guideline F3</a> [[WCAG20]]. Images are not
accessible in non-graphical presentations, and background images
specifically might be turned off in high-contrast display modes.
<p class="note">Note that stylistic foreground images can be provided
in CSS with the
<a href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>
property. (Semantically-important foreground images should be provided
in the document markup, e.g. with the &lt;img&gt; tag in HTML.)</p>
<p class="note"><a href="http://www.w3.org/TR/media-frags/#naming-space">Media fragments</a>
can be used to display a portion of an image. The
<a href="http://www.w3.org/TR/css3-images/">CSS Images</a> module
will provide fallback syntax for image formats and include additional
controls for image display.
<div class="example">
<p>Some examples specifying background images:</p>
<pre>
body { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
</pre>
</div>
<p class=note>Implementations may optimize by not downloading and
drawing images that are not visible (e.g., because they are behind
other, fully opaque images).
<h3 id="the-background-repeat">Tiling Images: the 'background-repeat' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-repeat</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;repeat-style&gt;</var> [ , <var>&lt;repeat-style&gt;</var> ]*
<tr>
<th>Initial:
<td>repeat
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>A list, each item consisting of:
two keywords, one per dimension
<tr>
<th>Animatable:
<td>no
</table>
<p>Specifies how background images are tiled after they have been
<a href="#the-background-size">sized</a> and <a href="#the-background-position">positioned</a>.
Where
<pre class=prod><dfn><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
<p>Single values for <var>&lt;repeat-style&gt;</var> have the following
meanings:
<dl>
<dt><dfn>''repeat-x''</dfn>
<dd>
Computes to ''repeat no-repeat''.
<dt><dfn>''repeat-y''</dfn>
<dd>
Computes to ''no-repeat repeat''.
<dt>''repeat''
<dd>
Computes to ''repeat repeat''.
<dt>''space''
<dd>
Computes to ''space space''
<dt>''round''
<dd>
Computes to ''round round''
<dt>''no-repeat''
<dd>
Computes to ''no-repeat no-repeat''
</dl>
<p>If a <var>&lt;repeat-style&gt;</var> value has two keywords, the first
one is for the horizontal direction, the second for the vertical one,
as follows:
<dl>
<dt><dfn title="''repeat''!!'background-repeat' value">''repeat''</dfn>
<dd>
The image is repeated in this direction as often as needed to cover
the <span class=index>background painting area</span>.
<dt><dfn title="''space''!!'background-repeat' value">''space''</dfn>
<dd>
The image is repeated as often as will fit within the
<span class=index>background positioning area</span> without being
clipped and then the images are spaced out to fill the area. The
first and last images touch the edges of the area. If the <span
class=index>background
painting area</span> 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.
<dt><dfn title="''round''!!'background-repeat' value">''round''</dfn>
<dd>
The image is repeated as often as will fit within the
<span class=index>background positioning area.</span> 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 <span
class=index>background
painting area</span> is larger than the background positioning area, then
the pattern repeats to fill the background painting area.
<dt><dfn title="''no-repeat''!!'background-repeat' value">''no-repeat''</dfn>
<dd>
The image is placed once and not repeated in this direction.
</dl>
<p>Unless one of the two keywords is ''no-repeat'', the
whole background painting area will be tiled, i.e., not just one
vertical strip and one horizontal strip.
<div class="example">
<p style="display:none">Example(s):
<pre>
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
</pre>
<div class="figure">
<p><img src="bg-repeat" alt="A centered background image, with
copies repeated up and down the border, padding and content
areas."><!--<SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A
name="img-bg-repeat" href="images/longdesc/bg-repeat-desc.html"
title="Long description for background pattern">[D]</A></SPAN>-->
<p class="caption">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.
</div>
</div>
<div class=example>
<p style="display:none">Example(s):
<pre>
body {
background-image: url(dot.png) white;
background-repeat: space
}
</pre>
<div class=figure>
<p><img src="bg-space" alt="Image of an element with a dotted background">
<p class=caption>The effect of 'space': the image of a dot is
tiled to cover the whole background and the images are equally
spaced.
</div>
</div>
<p>See the section <a href="#layering">“Layering multiple background
images”</a> for how 'background-repeat' interacts with other
comma-separated background properties to form each background image
layer.
<h3 id="the-background-attachment">Affixing Images: the 'background-attachment' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-attachment</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;attachment&gt;</var> [ , <var>&lt;attachment&gt;</var> ]*
<tr>
<th>Initial:
<td>scroll
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified
<tr>
<th>Animatable:
<td>no
</table>
<p>If background images are specified, this property specifies whether
they are fixed with regard to the <em class="index">viewport</em>
(<dfn>''fixed''</dfn>) or scroll along with the element (<dfn>''scroll''</dfn>)
or its contents (<dfn>''local''</dfn>). The property's value is given as
a comma-separated list of &lt;attachment&gt; keywords where
<pre class=prod><dfn><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
<dl>
<dt><dfn>fixed</dfn></dt>
<dd>The background is fixed with regard to the viewport. In paged
media where there is no viewport, a ''fixed'' background is fixed
with respect to the <a href="http://www.w3.org/TR/CSS21/page.html#page-box">page box</a>
and therefore replicated on every page.
<span class="note">Note that there is only one viewport per view.
Even if an element has a scrolling mechanism (see the 'overflow'
property [[!CSS21]]), a ''fixed'' background doesn't move with the
element.</span>
<dt><dfn>local</dfn></dt>
<dd>The background is fixed with regard to the element's contents:
if the element has a scrolling mechanism,
the background scrolls with the element's contents,
and the <i>background painting area</i> and <i>background positioning area</i>
are relative to the scrollable area of the element rather than to the border framing them.
Because the scrollable area does not include the border area,
for scrollable elements the ''border-box'' value of 'background-clip'
may be treated the same as ''padding-box''.</dd>
<dt><dfn>scroll</dfn></dt>
<dd>The background is fixed with regard to the element itself and
does not scroll with its contents. (It is effectively attached
to the element's border.)</dd>
</dl>
<p>Even if the image is fixed, it is still only visible when it is in
the <em class=index>background painting area</em> of the element or otherwise
unclipped. (See <a href="#special-backgrounds"> “The backgrounds of
special elements”</a> for the cases when background images are not
clipped.) Thus, unless the image is tiled, it may be invisible.
<div class="example">
<p>This example creates an infinite vertical band that remains
“glued” to the viewport when the element is scrolled.
<pre>
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
</pre>
</div>
<p>User agents that do not support ''fixed'' backgrounds (for
example due to limitations of the hardware platform) should ignore
declarations with the keyword ''fixed''. For example:
<pre class=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;
}
</pre>
<p>See the section <a href="#layering">“Layering multiple background
images”</a> for how 'background-attachment' interacts with other
comma-separated background properties to form each background image
layer.
<h3 id="the-background-position">Positioning Images: the 'background-position' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-position</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;position&gt;</var>
[ , <var>&lt;position&gt;</var> ]*
<tr>
<th>Initial:
<td>0% 0%
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>refer to size of <span class=index>background positioning
area</span> <em>minus</em> size of background image; see text
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>A list, each item consisting of:
a pair of offsets (horizontal and vertical) from the top left origin
each given as a combination of an absolute length and a percentage
<tr>
<th>Animatable:
<td>as <a href="http://www.w3.org/TR/css3-transitions/#animtype-repeatable-list">repeatable list</a> of <a href="http://www.w3.org/TR/css3-transitions/#animtype-simple-list">simple list</a> of <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
</table>
<p>If background images have been specified, this property specifies
their initial position (after any <a href="#the-background-size">resizing</a>)
within their corresponding <span>background positioning area.</span>
<p>Where
<pre class=prod><dfn><var>&lt;position&gt;</var></dfn> = [
[ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
|
[ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
[ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
|
[ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
[ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
]</pre>
<p>If only one value is specified, the second value is assumed to be
''center''. If two values are given, a length or percentage as the first
value represents the horizontal position (or offset) and a length or
percentage as the second value represents the vertical position (or
offset). <var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var>
values here represent an offset of the top left corner
of the background image from the top left corner of the background
positioning area.
<p class="note">Note that 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.
<p>If three or four values are given, then
each <var>&lt;percentage&gt;</var> or<var>&lt;length&gt;</var>
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.
<p>Positive values represent an offset <em>inward</em> from the edge of
the background positioning area. Negative values represent an offset
<em>outward</em> from the edge of the background positioning area.
<div class="example">
<p>The following declarations give the stated (horizontal, vertical)
offsets from the top left corner:</p>
<pre>
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 */</pre>
</div>
<dl>
<dt><var>&lt;percentage&gt;</var>
<dd><p>A percentage for the horizontal offset is relative to (<var>width of
background positioning area</var> - <var>width of background image</var>).
A percentage for the vertical offset is relative to (<var>height
of background
positioning area</var> - <var>height of background image</var>), where the
size of the image is the size given by 'background-size'.
<div class=example>
<p>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.
<div class="figure">
<p><img alt="Diagram of image position within element" src="bg-pos.png">
<p class="caption">Diagram of the meaning of ''background-position: 75% 50%''.
</div>
</div>
<dt><var>&lt;length&gt;</var>
<dd>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.
<dt><dfn title="''top''!!'background-position' value">''top''</dfn>
<dd>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.
<dt><dfn title="''right''!!'background-position' value">''right''</dfn>
<dd>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.
<dt><dfn title="''bottom''!!'background-position' value">''bottom''</dfn>
<dd>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.
<dt><dfn title="''left''!!'background-position' value">''left''</dfn>
<dd>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.
<dt><dfn title="''center''!!'background-position' value">''center''</dfn>
<dd>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.
</dl>
<div class="example">
<p>The following 'background' shorthand declarations use keywords
to set 'background-position' to the stated percentage values.</p>
<pre>
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% */
</pre>
</div>
<div class="example">
<p>In the example below, the (single) image is placed in the lower-right
corner of the viewport.
<pre>
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
</pre>
</div>
<div class=example>
<p>Background positions can also be relative to other corners than the
top left. E.g., the following puts the background image 10px from the
bottom and 3em from the right:
<pre>background-position: right 3em bottom 10px</pre>
</div>
<p>See the section <a href="#layering">“Layering multiple background
images”</a> for how 'background-position' interacts with
other comma-separated background properties to form each background
image layer.
<h3 id="the-background-clip">Painting Area: the 'background-clip' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-clip</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;box&gt;</var> [ , <var>&lt;box&gt;</var> ]*
<tr>
<th>Initial:
<td>border-box
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified
<tr>
<th>Animatable:
<td>no
</table>
<p>Determines the <dfn id="background-painting-area">background painting area</dfn>,
which determines the area within which the background is painted.
The syntax of the property is given with
<pre class=prod><dfn><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
<p>Values have the following meanings:
<dl>
<dt><dfn title="''border-box''!!'background-clip' value">
''border-box''</dfn></dt>
<dd>The background is painted within (clipped to) the
<span>border box.</span>
<dt><dfn title="''padding-box''!!'background-clip' value">
''padding-box''</dfn></dt>
<dd>The background is painted within (clipped to) the
<span>padding box.</span>
<dt><dfn title="''content-box''!!'background-clip' value">
''content-box''</dfn></dt>
<dd>The background is painted within (clipped to) the
<span>content box.</span>
</dl>
<p class=note>Note that the root element has a different <span>background
painting area,</span> and thus the 'background-clip' property has no effect
when specified on it. See <a href="#special-backgrounds"> “The
backgrounds of special elements.”</a>
<p class=note>Note that the background is always drawn <em>behind</em>
the border, if any. See “Elaborate description of Stacking Contexts” in
[[!CSS21]].
<p>See the section on <a href="#corner-shaping">Corner Shaping</a>
for how 'border-radius' affects the shape of the <i>background painting area</i>.
<p>See the section <a href="#layering">“Layering multiple background
images”</a> for how ''background-clip'' interacts with other
comma-separated background properties to form each background image
layer.
<h3 id="the-background-origin">Positioning Area: the 'background-origin' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-origin</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><var>&lt;box&gt;</var>
[ , <var>&lt;box&gt;</var> ]*
<tr>
<th>Initial:
<td>padding-box
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>N/A
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified
<tr>
<th>Animatable:
<td>no
</table>
<p>For elements rendered as a single box, specifies the
<dfn id="background-positioning-area">background positioning area</dfn>.
For elements rendered as multiple boxes
(e.g., inline boxes on several lines, boxes on several pages),
specifies which boxes 'box-decoration-break' [[CSS3-BREAK]] operates on
to determine the background positioning area(s).
<dl>
<dt><dfn title="''padding-box''!!'background-origin' value">
''padding-box''</dfn>
<dd>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.)
<dt><dfn title="''border-box''!!'background-origin' value">
''border-box''</dfn>
<dd>The position is relative to the border box.
<dt><dfn>''content-box''</dfn>
<dd>The position is relative to the content box.
</dl>
<p>If the 'background-attachment' value for this image is
''fixed'', then this property has no effect: in this case the
background positioning area is the
<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial containing block</a> [[!CSS21]].
<p class="note">Note that 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 of the background image will be
clipped.
<p>See the section <a href="#layering">“Layering multiple background
images”</a> for how ''background-origin'' interacts with other
comma-separated background properties to form each background image
layer.
<h3 id="the-background-size">Sizing Images: the 'background-size' property</h3>
<table class="propdef">
<tr>
<th>Name:
View remainder of file in raw view