8000 csswg-drafts/css3-background/Overview.html at deab3f00cc488e5a908d13d8bcfadc45cd4f695c · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
4921 lines (3608 loc) · 158 KB

Overview.html

File metadata and controls

4921 lines (3608 loc) · 158 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head>
<title>CSS Backgrounds and Borders Module Level 3</title>
<link href=default.css rel=stylesheet type="text/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 href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Backgrounds and Borders Module Level 3</h1>
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 September
2009</h2>
<dl>
<dt>This version:
<dd><!-- <a href="http://www.w3.org/TR/2009/WD-css3-background-20090930">http://www.w3.org/TR/2009/WD-css3-background-20090930</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css3-background">http://www.w3.org/TR/css3-background</a>
<dt>Previous versions:
<dd><a
href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://www.w3.org/TR/2005/WD-css3-background-20050216</a>
<dd><a
href="http://www.w3.org/TR/2002/WD-css3-border-20021107">http://www.w3.org/TR/2002/WD-css3-border-20021107</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>Brad Kemper (Invited Expert)
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> &copy; 2009 <a
href="http://www.w3.org/"><acronym title="World Wide Web
Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
of Technology">MIT</acronym></a>, <a
href="http://www.ercim.org/"><acronym title="European Research Consortium
for Informatics and Mathematics">ERCIM</acronym></a>, <a
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-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 <a
href="#document">documents</a> (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 <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
level&nbsp;1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
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>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
for discussion of this specification. When sending e-mail, please put the
text &#8220;css3-background&#8221; in the subject, preferably like this:
&#8220;[<!---->css3-background<!---->] <em>&hellip;summary of
comment&hellip;</em>&#8221;
<p>This document was produced by the <a href="/Style/CSS/members">CSS
Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> 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 which the individual believes contains <a
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose 133E the information in accordance with <a
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
W3C Patent Policy</a>.</p>
<!--end-status-->
<p class=issue>The CSS WG maintains an <a
href="http://www.w3.org/Style/CSS/Tracker/products/11">issues list</a> for
this module. <strong>If there's a conflict between CSS Backgrounds and
Borders Level 3 and CSS 2.1, please report it to the CSS Working Group.
Since these specs are intended to be consistent with each other, conflicts
indicate an error in one or both specs.</strong>
<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 implementors: inner
shadows for &lsquo;<code class=property><a
href="#box-shadow">box-shadow</a></code>&rsquo;, &lsquo;<code
class=property><a href="#box-break">box-break</a></code>&rsquo;.
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
<li><a href="#values"><span class=secno>2 </span>Values</a>
<li><a href="#backgrounds"><span class=secno>3 </span>Background
properties</a>
<ul class=toc>
<li><a href="#layering"><span class=secno>3.1 </span>Layering multiple
background images</a>
<li><a href="#the-background-color"><span class=secno>3.2 </span>The
&lsquo;<code class=property>background-color</code>&rsquo; property</a>
<li><a href="#the-background-image"><span class=secno>3.3 </span>The
&lsquo;<code class=property>background-image</code>&rsquo; property</a>
<li><a href="#the-background-repeat"><span class=secno>3.4 </span>The
&lsquo;<code class=property>background-repeat</code>&rsquo;
property</a>
<li><a href="#the-background-attachment"><span class=secno>3.5
</span>The &lsquo;<code
class=property>background-attachment</code>&rsquo; property</a>
<li><a href="#the-background-position"><span class=secno>3.6 </span>The
&lsquo;<code class=property>background-position</code>&rsquo;
property</a>
<li><a href="#the-background-clip"><span class=secno>3.7 </span>The
&lsquo;<code class=property>background-clip</code>&rsquo; property</a>
<li><a href="#the-background-origin"><span class=secno>3.8 </span>The
&lsquo;<code class=property>background-origin</code>&rsquo;
property</a>
<li><a href="#the-background-size"><span class=secno>3.9 </span>The
&lsquo;<code class=property>background-size</code>&rsquo; property</a>
<li><a href="#the-background"><span class=secno>3.10 </span>The
&lsquo;<code class=property>background</code>&rsquo; shorthand
property</a>
<li><a href="#special-backgrounds"><span class=secno>3.11 </span>The
backgrounds of special elements</a>
</ul>
<li><a href="#borders"><span class=secno>4 </span>Border properties</a>
<ul class=toc>
<li><a href="#the-border-color"><span class=secno>4.1 </span>The
&lsquo;<code class=property>border-color</code>&rsquo; properties</a>
<li><a href="#the-border-style"><span class=secno>4.2 </span>The
&lsquo;<code class=property>border-style</code>&rsquo; properties</a>
<li><a href="#the-border-width"><span class=secno>4.3 </span>The
&lsquo;<code class=property>border-width</code>&rsquo; properties</a>
<li><a href="#the-border-radius"><span class=secno>4.4 </span>The
&lsquo;<code class=property>border-radius</code>&rsquo; properties</a>
<li><a href="#the-border-shorthands"><span class=secno>4.5 </span>The
border shorthand properties</a>
</ul>
<li><a href="#border-images"><span class=secno>5 </span>Border Images</a>
<ul class=toc>
<li><a href="#the-border-image-source"><span class=secno>5.1 </span>The
&lsquo;<code class=property>border-image-source</code>&rsquo;
property</a>
<li><a href="#the-border-image-slice"><span class=secno>5.2 </span>The
&lsquo;<code class=property>border-image-slice</code>&rsquo;
property</a>
<li><a href="#the-border-image-width"><span class=secno>5.3 </span>The
&lsquo;<code class=property>border-image-width</code>&rsquo;
property</a>
<li><a href="#the-border-image-outset"><span class=secno>5.4 </span>The
&lsquo;<code class=property>border-image-outset</code>&rsquo;
property</a>
<li><a href="#the-border-image-repeat"><span class=secno>5.5 </span>The
&lsquo;<code class=property>border-image-repeat</code>&rsquo;
property</a>
<li><a href="#border-image-process"><span class=secno>5.6
</span>Border-image drawing process</a>
<li><a href="#the-border-image"><span class=secno>5.7 </span>The
&lsquo;<code class=property>border-image</code>&rsquo; shorthand</a>
</ul>
<li><a href="#misc"><span class=secno>6 </span>Miscellaneous Effects</a>
<ul class=toc>
<li><a href="#the-box-break"><span class=secno>6.1 </span>The
&lsquo;<code class=property>box-break</code>&rsquo; property</a>
<li><a href="#the-box-shadow"><span class=secno>6.2 </span>The
&lsquo;<code class=property>box-shadow</code>&rsquo; property</a>
</ul>
<li><a href="#definitions"><span class=secno>7 </span>Definitions</a>
<ul class=toc>
<li><a href="#glossary"><span class=secno>7.1 </span>Glossary</a>
<li><a href="#conformance"><span class=secno>7.2 </span>Conformance</a>
<li><a href="#levels"><span class=secno>7.3 </span>Levels</a>
<ul class=toc>
<li><a href="#level-1"><span class=secno>7.3.1 </span>CSS Level 1</a>
<li><a href="#level-2"><span class=secno>7.3.2 </span>CSS Level 2</a>
<li><a href="#level-3"><span class=secno>7.3.3 </span>CSS Level 3</a>
</ul>
<li><a href="#exit"><span class=secno>7.4 </span>CR exit criteria</a>
</ul>
<li><a href="#acknowledgments"><span class=secno>8
</span>Acknowledgments</a>
<li><a href="#references"><span class=secno>9 </span>References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
<li class=no-num><a href="#other-references">Other references</a>
</ul>
<li class=no-num><a href="#property-index">Property index</a>
<li class=no-num><a href="#index">Index</a>
</ul>
<!--end-toc-->
<h2 id=introduction><span class=secno>1 </span>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> <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, 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 alt="Diagram of a typical box, showing the content, padding,
border and margin areas" src=box>
<p class=caption>The various areas and edges of a typical box. (This
diagram is explained in the CSS2.1 Box Model chapter <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.)
</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
&lsquo;<code class=property><a
href="#box-shadow">box-shadow</a></code>&rsquo; property.
<p>If an element is broken into multiple boxes, &lsquo;<code
class=property><a href="#box-break">box-break</a></code>&rsquo; 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 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<h2 id=values><span class=secno>2 </span>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 <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<p><dfn id=ltcolorgt><var>&lt;color&gt;</var></dfn> values are defined in
CSS Color Level 3 <a href="#CSS3COLOR"
rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>.
<p><dfn id=ltimagegt><var>&lt;image&gt;</var></dfn> values are defined by
this specification as <code class=prod><var><a
href="#ltimagegt">&lt;image&gt;</a></var> = <var>&lt;uri&gt;</var></code>.
<p class=note>A future specification may expand the definition of <var><a
href="#ltimagegt">&lt;image&gt;</a></var> to allow other values, e.g., to
define image slices.
<p>All other values are defined in CSS Level 2 Revision 1 <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<p>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 value, but for readability it has not been listed
explicitly.
<h2 id=backgrounds><span class=secno>3 </span>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 (&lsquo;<code class=property><a
href="#background-color">background-color</a></code>&rsquo;) and images
(&lsquo;<code class=property><a
href="#background-image">background-image</a></code>&rsquo;) 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
&lsquo;<code class=property>transparent</code>&rsquo; value on
&lsquo;<code class=property><a
href="#background-color">background-color</a></code>&rsquo;.
<h3 id=layering><span class=secno>3.1 </span>Layering multiple background
images</h3>
<p>The background of a box can have multiple <span class=index
id=layers>layers</span> in CSS3. The number of layers is determined by the
number of comma-separated values in the &lsquo;<code class=property><a
href="#background-image">background-image</a></code>&rsquo; property. Note
that a value of &lsquo;<code class=property>none</code>&rsquo; 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 <a href="#ua">UA</a> 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 &lsquo;<code class=property><a
href="#background-origin">background-origin</a></code>&rsquo; and
&lsquo;<code class=property><a
href="#background-repeat">background-repeat</a></code>&rsquo; 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><span class=secno>3.2 </span>The &lsquo;<code
class=property><a
href="#background-color">background-color</a></code>&rsquo; property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-color>background-color</dfn>
<tr>
<th>Value:
<td><var><a href="#ltcolorgt">&lt;color&gt;</a></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 id=background-color0
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 &lsquo;<code
class=property><a
href="#background-clip">background-clip</a></code>&rsquo; value associated
with the bottom-most background image.
<h3 id=the-background-image><span class=secno>3.3 </span>The &lsquo;<code
class=property><a
href="#background-image">background-image</a></code>&rsquo; property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-image>background-image</dfn>
<tr>
<th>Value:
<td><var><a href="#ltbg-imagegt">&lt;bg-image&gt;</a></var> [ , <var><a
href="#ltbg-imagegt">&lt;bg-image&gt;</a></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 id=ltbg-imagegt><var>&lt;bg-image&gt;</var></dfn> = <var><a href="#ltimagegt">&lt;image&gt;</a></var> | none</pre>
<p>A value of &lsquo;<code class=css>none</code>&rsquo; 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 &lsquo;<code class=property><a
href="#background-image">background-image</a></code>&rsquo; interacts with
other comma-separated background properties to form each background image
layer.
<p>When setting a background image, authors should also specify a
&lsquo;<code class=css><a
href="#background-color">background-color</a></code>&rsquo; that will
preserve contrast with the text for when the image is unavailable.
<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><span class=secno>3.4 </span>The &lsquo;<code
class=property><a
href="#background-repeat">background-repeat</a></code>&rsquo; property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-repeat>background-repeat</dfn>
<tr>
<th>Value:
<td><var><a href="#ltrepeatgt">&lt;repeat&gt;</a></var> [ , <var><a
href="#ltrepeatgt">&lt;repeat&gt;</a></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>as specified
</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 id=ltrepeatgt><var>&lt;repeat&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
<p>Single values for <var><a href="#ltrepeatgt">&lt;repeat&gt;</a></var>
have the following meanings:
<dl>
<dt><dfn id=repeat-x>repeat-x</dfn>
<dd> Equivalent to &lsquo;<code class=css>repeat no-repeat</code>&rsquo;.
<dt><dfn id=repeat-y>repeat-y</dfn>
<dd> Equivalent to &lsquo;<code class=css>no-repeat repeat</code>&rsquo;.
<dt><dfn id=repeat-repeat>repeat</dfn>
<dd> Equivalent to &lsquo;<code class=css>repeat repeat</code>&rsquo;.
<dt><dfn id=no-repeat-no-repeat>no-repeat</dfn>
<dd> Equivalent to &lsquo;<code class=css>no-repeat
no-repeat</code>&rsquo;
<dt><dfn id=space-space>space</dfn>
<dd> Equivalent to &lsquo;<code class=css>space space</code>&rsquo;
<dt><dfn id=round-round>round</dfn>
<dd> Equivalent to &lsquo;<code class=css>round round</code>&rsquo;
</dl>
<p>If a <var><a href="#ltrepeatgt">&lt;repeat&gt;</a></var> value has two
keywords, the first one is for the horizontal direction, the second for
the vertical one, as follows:
<dl>
<dt><dfn id=repeat>repeat</dfn>
<dd> The image is repeated in this direction as often as needed to cover
the <a class=index href="#background-painting-area"
id=background-painting-area.>background painting area.</a>
<dt><dfn id=no-repeat>no-repeat</dfn>
<dd> The image is placed once and not repeated in this direction.
<dt><dfn id=space>space</dfn>
<dd> The image is repeated as often as will fit within the <a class=index
href="#background-positioning-area"
id=background-positioning-area0>background positioning area</a> 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 background
painting area is larger than the background positioning area, then the
pattern repeats to fill the background painting area. The value of
&lsquo;<code class=property><a
href="#background-position">background-position</a></code>&rsquo; 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 &lsquo;<code class=property><a
href="#background-position">background-position</a></code>&rsquo;
determines its position in this direction.
<dt><dfn id=round>round</dfn>
<dd> The image is repeated as often as will fit within the <a
href="#background-positioning-area">background positioning area.</a> If
it doesn't fit a whole number of times, it is rescaled so that it does.
See explanation under &lsquo;<code class=property><a
href="#background-size">background-size</a></code>&rsquo;. If the
background painting area is larger than the background positioning area,
then the pattern repeats to fill the background painting area.
</dl>
<p>Unless one of the two keywords is &lsquo;<code class=css><a
href="#no-repeat">no-repeat</a></code>&rsquo;, 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 alt="A centered background image, with copies repeated up and
down the border, padding and content areas."
src=bg-repeat><!--<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 &lsquo;<code class=css><a
href="#repeat-y">repeat-y</a></code>&rsquo;: 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 alt="Image of an element with a dotted background" src=bg-space>
<p class=caption>The effect of &lsquo;<code class=property><a
href="#space">space</a></code>&rsquo;: 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 &lsquo;<code class=property><a
href="#background-repeat">background-repeat</a></code>&rsquo; interacts
with other comma-separated background properties to form each background
image layer.
<h3 id=the-background-attachment><span class=secno>3.5 </span>The
&lsquo;<code class=property><a
href="#background-attachment">background-attachment</a></code>&rsquo;
property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-attachment>background-attachment</dfn>
<tr>
<th>Value:
<td><var><a href="#ltattachmentgt">&lt;attachment&gt;</a></var> [ ,
<var><a href="#ltattachmentgt">&lt;attachment&gt;</a></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 id=viewport>viewport</em>
(&lsquo;<code class=css>fixed</code>&rsquo;) scroll along with the element
(&lsquo;<code class=css>scroll</code>&rsquo; and &lsquo;<code
class=css>local</code>&rsquo;). Where
<pre
class=prod><dfn id=ltattachmentgt><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
<p>Note that there is only one viewport per view. If an element has a
scrolling mechanism (see the &lsquo;<code
class=property>overflow</code>&rsquo; property <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a &lsquo;<code
class=css>fixed</code>&rsquo; background doesn't move with the element,
and a &lsquo;<code class=css>scroll</code>&rsquo; background doesn't move
with the scrolling mechanism.
<p>The difference between &lsquo;<code class=css>scroll</code>&rsquo; and
&lsquo;<code class=css>local</code>&rsquo; is only visible when the
element has a scrolling mechanism: in the case of &lsquo;<code
class=css>scroll</code>&rsquo;, the background does not scroll with the
element's content. (It is attached to the element's border, effectively.)
In the case of &lsquo;<code class=css>local</code>&rsquo;, the background
scrolls along with the element's content. 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 &lsquo;<code class=css><a
href="#border-box">border-box</a></code>&rsquo; value of &lsquo;<code
class=property><a
href="#background-clip">background-clip</a></code>&rsquo; as &lsquo;<code
class=css><a href="#padding-box">padding-box</a></code>&rsquo; in cases
where &lsquo;<code class=property><a
href="#background-attachment">background-attachment</a></code>&rsquo; is
&lsquo;<code class=css>local</code>&rsquo; and the contents of the element
scroll.
<p>In paged media where there is no viewport, a &lsquo;<code
class=css>fixed</code>&rsquo; background is fixed with respect to the <a
href="http://www.w3.org/TR/CSS21/page.html#page-box">page box</a>.
<p>Even if the image is fixed, it is still only visible when it is in the
<em><a href="#background-painting-area">background painting area</a></em>
of the element or otherwise unclipped. (See <a
href="#special-backgrounds"> “The backgrounds of special elements”</a>
for the cases when background imagess 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 &lsquo;<code
class=css>fixed</code>&rsquo; backgrounds (for example due to limitations
of the hardware platform) should ignore declarations with the keyword
&lsquo;<code class=css>fixed</code>&rsquo;. 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 &lsquo;<code class=property><a
href="#background-attachment">background-attachment</a></code>&rsquo;
interacts with other comma-separated background properties to form each
background image layer.
<h3 id=the-background-position><span class=secno>3.6 </span>The
&lsquo;<code class=property><a
href="#background-position">background-position</a></code>&rsquo; property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-position>background-position</dfn>
<tr>
<th>Value:
<td><var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></var> [ ,
<var><a href="#ltbg-positiongt">&lt;bg-position&gt;</a></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 <a class=index href="#background-positioning-area"
id=background-positioning-area1>background positioning area</a>
<em>minus</em> size of background image; see text
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>If one or two values are specified, for a &lt;length&gt; the
absolute value, otherwise a percentage. If three or four values are
specified, two pairs of a keyword plus a length or 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 <a
href="#background-positioning-area">background positioning area.</a>
<p>Where
<pre
class=prod><dfn id=ltbg-positiongt><var>&lt;bg-position&gt;</var></dfn> = [
[ [ <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> ]? ] ||
[ 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
&lsquo;<code class=property><a
href="#position-center">center</a></code>&rsquo;. 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). &lt;percentage&gt; and &lt;length&gt; 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 &lt;percentage&gt; or
&lt;length&gt; represents an offset and must be preceded by a keyword,
which specifies from which edge the offset is given. For example,
&lsquo;<code class=css>background-position: bottom 10px right
20px</code>&rsquo; represents a &lsquo;<code class=css>10px</code>&rsquo;
vertical offset up from the bottom edge and a &lsquo;<code
class=css>20px</code>&rsquo; 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>&lt;percentage&gt;
<dd>
<p>A percentage for the horizontal offset is relative to (<var>width
background positioning area</var> - <var>width of background
image</var>). A percentage for the vertical offset is relative to
(<var>height background positioning area</var> - <var>height of
View remainder of file in raw view