8000 csswg-drafts/css-backgrounds-4/Overview.src.html at 9f70b455306ec4399b3c72b4287b94959a1b8a1a · simonwuelker/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
3428 lines (2906 loc) · 125 KB

Overview.src.html

File metadata and controls

3428 lines (2906 loc) · 125 KB
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html lang="en">
<head>
<meta charset=utf8>
<title>CSS Backgrounds and Borders Module Level 4</title>
<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; }
#box-shadow-samples td { background: white; color: black; }
</style>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-WD.css">
</head>
<body>
<div class="head">
<!--logo-->
<h1>CSS Backgrounds and Borders Module Level 4</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:
<dd><!-- <a href="http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]">[VERSION]</a> -->
<a href="http://dev.w3.org/csswg/css4-background">http://dev.w3.org/csswg/css4-background</a>
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css4-background">[LATEST]</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> (Invited Expert)
<dd><a href="mailto:brad.kemper@gmail.com">Brad Kemper</a> (Invited Expert)
<dd><a href="mailto:lea@w3.org">Lea Verou</a> (<a href="http://www.w3.org/">W3C</a>)
</dl>
<!--copyright-->
<hr title="Separator for header">
</div>
<!--
[Will this document use HTML4 or HTML5?]
[The text below is also in the status section, does it need to be repeated?]
<details class=obsolete open>
<summary>Not Ready For Implementation</summary>
<p>
This spec is not yet ready for implementation.
It exists in this repository to record the ideas and promote discussion.
<p>
Before attempting to implement this spec,
please contact the CSSWG at www-style@w3.org.
</details>
-->
<h2 class="no-num no-toc" id="abstract">
Abstract</h2>
<p>CSS is a language for describing the rendering of structured documents
(such as HTML and XML) on screen, on paper, in speech, etc.
This draft contains the features of CSS relating to the borders and backgrounds
of boxes on the page. It includes and extends the functionality of
CSS Backgrounds and Borders Level&nbsp;3. [[CSS3BACKGROUND]]
The main extensions compared to level&nbsp;3 are shaping ('corner-shape')
and clipping borders ('border-clip'), logical background positions
('background-position'), and the ''extend'' ability of 'background-repeat'.
<h2 class="no-num no-toc" id="status">
Status of this document</h2>
<p style="color: red; background: yellow; border: solid thick;">
<strong>This draft is not actively-maintained at the moment.
Comments are welcome, but please refer to
<a href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds and Borders</a>
if you are implementing something.</strong>
<!--status-->
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
<!--toc-->
<h2 id="introduction">
Introduction</h2>
<p><em>This section 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'
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</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]] and the value type definitions
from CSS Values and Units Level 3 [[!CSS3VALUES]].</p>
<h2 id="backgrounds">
Background properties</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>.
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 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">
The 'background-color' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-color</dfn>
<tr>
<th>Value:
<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(s)
</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.
<h3 id="the-background-image">
The 'background-image' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-image</dfn>
<tr>
<th>Value:
<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
</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">
The 'background-repeat' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-repeat</dfn>
<tr>
<th>Value:
<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
</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>Equivalent to ''repeat no-repeat''.
<dt><dfn>''repeat-y''</dfn>
<dd>Equivalent to ''no-repeat repeat''.
<dt>''repeat''
<dd>Equivalent to ''repeat repeat''.
<dt>''space''
<dd>Equivalent to ''space space''
<dt>''round''
<dd>Equivalent to ''round round''
<dt>''no-repeat''
<dd>Equivalent to ''no-repeat no-repeat''
</dl>
<p>If a <var>&lt;repeat-style&a CD6 mp;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">
<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>
<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">
The 'background-attachment' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-attachment</dfn>
<tr>
<th>Value:
<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
</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 7E53 scrolling mechanism, the background scrolls
with the element's contents. In this case, the background behind
the element's border (if any) scrolls as well, even though the
border itself does not scroll with the contents. The UA may,
however, treat the ''border-box'' value of 'background-clip' as
''padding-box'' in cases where 'background-attachment' is ''local''
and the contents of the element scroll.</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">
The 'background-position' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-position</dfn>
<tr>
<th>Value:
<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:
two keywords representing the origin and two offsets from that
origin, each given as an absolute length (if given a &lt;length&gt;),
otherwise as a percentage.
</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 <i>background positioning area</i>.
<p>Where
<pre class=prod><dfn><var>&lt;position&gt;</var></dfn> = [
<!-- --> [ 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 ]?
<!-- -->|
<!-- --> [ 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 and at least one value is not a keyword,
then the first value represents the horizontal position (or offset) and
the second 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>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 8D6D 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>Equivalent 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>Equivalent 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>Equivalent 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>Equivalent 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>Equivalent 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">
The 'background-clip' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-clip</dfn>
<tr>
<th>Value:
<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
</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 <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.
<div class=issue>
<p>There have been suggestions that automatic adaptation of a
background to the writing mode and direction might be useful. I.e.,
rather than the author providing several mirrored and rotated
versions of the same image, he only provides one image and lets the
CSS renderer transform it.
<p>That could be done, e.g., with a new property
''background-writing-mode'' with as value a set of keywords to
describe if and how an image adapts to the current value of
'writing-mode' and 'direction'. (As many sets of keywords as there
are background layers.) Possible values are:
<dl>
<dt>ltr, rtl, rl-ltr, rl-rtl, lr-ltr, lr-rtl <dd>Indicates the image
is designed for, respectively, horizontal left-to-right elements,
horizontal right-to-left elements, vertical left-to-right
elements...
<dt>may-rotate <dd>Indicates that the image may be rotated 90
degrees if the element's writing mode is diffferent from what the
image was designed for.
<dt>may-mirror <dd>Indicates that the image may be mirrored if the
element's direction is different than what the image was designed
for.
<dt>may-position <dd>Indicates that the 'background-position' values
can be rotated and/or mirrored if the element's writing-mode and/or
direction is different from what the image was designed for.
</dl>
</div>
<h3 id="the-background-origin">
The 'background-origin' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-origin</dfn>
<tr>
<th>Value:
<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
</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'
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">
The 'background-size' property</h3>
<table class="propdef">
<tr>
<th>Name:
<td><dfn>background-size</dfn>
<tr>
<th>Value:
<td><var>&lt;bg-size&gt;</var> [ , <var>&lt;bg-size&gt;</var> ]*
<tr>
<th>Initial:
<td>auto
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>see text
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified, but with lengths made absolute
</table>
<p>Specifies the size of the background images. Where
<pre class=prod><dfn><var>&lt;bg-size&gt;</var></dfn> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
<p>Values have the following meanings:
<dl>
<dt><dfn>''contain''</dfn></dt>
<dd>Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its
height can fit inside the <span class=index>background
positioning area.</span></dd>
<dt><dfn>''cover''</dfn></dt>
<dd>Scale the image, while preserving its intrinsic aspect ratio
(if any), to the smallest size such that both its width and its
height can completely cover the background positioning area.</dd>
<dt>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>
| <dfn title="''auto''!!'background-size' value">auto</dfn> ]{1,2}</dt>
<dd>
<p>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''.
<p>A percentage is relative to the background positioning area.
<p>An ''auto'' value for one dimension is resolved by using the
image's intrinsic ratio and the size of the other dimension, or
failing that, using the image's intrinsic size, or failing that,
treating it as 100%.
<p>If both values are ''auto'' then the intrinsic 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 an intrinsic width nor an intrinsic height, its size is
determined as for ''contain''.
<p>Negative values are not allowed.
</dd>
</dl>
<div class="example">
<p>Here are some examples. The first example stretches the background
image independently in both dimensions to completely cover the content
area:
<pre>
<!-- -->div {
<!-- --> background-image: url(plasma.png);
View remainder of file in raw view