8000 csswg-drafts/css-backgrounds/Overview.html at 04936c614a9040bc8bc5e996db80bd9a328aba6d · w3c/csswg-drafts · GitHub
Skip to content 7FFF

Overview.html

Latest commit

 

History

History
6022 lines (4439 loc) · 196 KB

Overview.html

File metadata and controls

6022 lines (4439 loc) · 196 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
<meta charset=utf8>
<title>CSS Backgrounds and Borders Module Level 3</title>
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dcterms.rights>
<meta content="CSS Backgrounds and Borders Module Level 3"
name=dcterms.title>
<meta content=text name=dcterms.type>
<meta content=2013-11-11 name=dcterms.date>
<meta content="Bert Bos" name=dcterms.creator>
<meta content="Elika J. Etemad" name=dcterms.creator>
<meta content="Brad Kemper" name=dcterms.creator>
<meta content=W3C name=dcterms.publisher>
<meta content="http://dev.w3.org/csswg/css3-background/"
name=dcterms.identifier>
<link href="#contents" rel=contents>
<link href="#index" rel=index>
<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; }
pre { text-align: left; }
#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">
<script defer=defer
src="http://test.csswg.org/harness/annotate.js#css-backgrounds-3_dev"
type="text/javascript"></script>
<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">Editor's Draft 11 November 2013</h2>
<dl>
<dt>This version:
<dd><!-- <a href="http://www.w3.org/TR/2013/CR-css3-background-20131111/">http://dev.w3.org/csswg/css3-background/</a> -->
<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>Latest editor's draft:
<dd><a
href="http://dev.w3.or 2B2 g/csswg/css3-background/">http://dev.w3.org/csswg/css3-background/</a>
<dt>Previous version:
<dd><a
href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</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:
<dd><a
href="mailto:www-style@w3.org?subject=%5Bcss-backgrounds%5D%20feedback">www-style@w3.org</a>
with subject line “<kbd>[css-backgrounds] <var>… message topic
…</var></kbd>” (<a
href="http://lists.w3.org/Archives/Public/www-style/"
rel=discussion>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 version:
<dd><a
href="http://test.csswg.org/suites/css3-background/nightly-unstable/">http://test.csswg.org/suites/css3-background/nightly-unstable/</a>
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</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 3 relating
to borders and backgrounds. It includes and extends the functionality of
CSS level 2 <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS level 1
<a href="#ref-CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main
extensions compared to level 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?Subject=%5Bcss3-background%5D%20PUT%20SUBJECT%20HERE">
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
“css3-background” in the subject, preferably like this:
“[<!---->css3-background<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
2004 W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/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="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<!--end-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: ‘<a
href="#box-decoration-break"><code
class=property>box-decoration-break</code></a>’, animatability of ‘<a
href="#box-shadow"><code class=property>box-shadow</code></a>’
<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>
<!--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 and
Interactions</a>
<ul class=toc>
<li><a href="#placement"><span class=secno>2.1. </span> Module
Interactions</a>
<li><a href="#value-types"><span class=secno>2.2. </span> Value
Types</a>
<li><a href="#animations"><span class=secno>2.3. </span>Animated
Values</a>
</ul>
<li><a href="#backgrounds"><span class=secno>3. </span> Backgrounds</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>Base
Color: the ‘<code class=property>background-color</code>’
property</a>
<li><a href="#the-background-image"><span class=secno>3.3. </span>Image
Sources: the ‘<code class=property>background-image</code>’
property</a>
<li><a href="#the-background-repeat"><span class=secno>3.4.
</span>Tiling Images: the ‘<code
class=property>background-repeat</code>’ property</a>
<li><a href="#the-background-attachment"><span class=secno>3.5.
</span>Affixing Images: the ‘<code
class=property>background-attachment</code>’ property</a>
<li><a href="#the-background-position"><span class=secno>3.6.
</span>Positioning Images: the ‘<code
class=property>background-position</code>’ property</a>
<li><a href="#the-background-clip"><span class=secno>3.7.
</span>Painting Area: the ‘<code
class=property>background-clip</code>’ property</a>
<li><a href="#the-background-origin"><span class=secno>3.8.
</span>Positioning Area: the ‘<code
class=property>background-origin</code>’ property</a>
<li><a href="#the-background-size"><span class=secno>3.9. </span>Sizing
Images: the ‘<code class=property>background-size</code>’
property</a>
<li><a href="#the-background"><span class=secno>3.10. </span>Backgrounds
Shorthand: the ‘<code class=property>background</code>’
property</a>
<li><a href="#special-backgrounds"><span class=secno>3.11. </span>
Backgrounds of Special Elements</a>
</ul>
<li><a href="#borders"><span class=secno>4. </span> Borders</a>
<ul class=toc>
<li><a href="#the-border-color"><span class=secno>4.1. </span>Line
Colors: the ‘<code class=property>border-color</code>’
properties</a>
<li><a href="#the-border-style"><span class=secno>4.2. </span>Line
Patterns: the ‘<code class=property>border-style</code>’
properties</a>
<li><a href="#the-border-width"><span class=secno>4.3. </span>Line
Thickness: the ‘<code class=property>border-width</code>’
properties</a>
<li><a href="#the-border-shorthands"><span class=secno>4.4.
</span>Border Shorthand Properties</a>
</ul>
<li><a href="#corners"><span class=secno>5. </span>Rounded Corners</a>
<ul class=toc>
<li><a href="#the-border-radius"><span class=secno>5.1. </span>Curve
Radii: the ‘<code class=property>border-radius</code>’
properties</a>
<li><a href="#corner-shaping"><span class=secno>5.2. </span>Corner
Shaping</a>
<li><a href="#corner-clipping"><span class=secno>5.3. </span>Corner
Clipping</a>
<li><a href="#corner-transitions"><span class=secno>5.4. </span>Color
and Style Transitions</a>
<li><a href="#corner-overlap"><span class=secno>5.5. </span>Overlapping
Curves</a>
<li><a href="#border-radius-tables"><span class=secno>5.6. </span>Effect
on Tables</a>
</ul>
<li><a href="#border-images"><span class=secno>6. </span>Border Images</a>
<ul class=toc>
<li><a href="#the-border-image-source"><span class=secno>6.1.
</span>Image Source: the ‘<code
class=property>border-image-source</code>’ property</a>
<li><a href="#the-border-image-slice"><span class=secno>6.2.
</span>Image Slicing: the ‘<code
class=property>border-image-slice</code>’ property</a>
<li><a href="#the-border-image-width"><span class=secno>6.3.
</span>Drawing Areas: the ‘<code
class=property>border-image-width</code>’ property</a>
<li><a href="#the-border-image-outset"><span class=secno>6.4.
</span>Edge Overhang: the ‘<code
class=property>border-image-outset</code>’ property</a>
<li><a href="#the-border-image-repeat"><span class=secno>6.5.
</span>Image Tiling: the ‘<code
class=property>border-image-repeat</code>’ property</a>
<li><a href="#border-image-process"><span class=secno>6.6. </span>
Drawing the Border Image</a>
<li><a href="#the-border-image"><span class=secno>6.7. </span>Border
Image Shorthand: the ‘<code class=property>border-image</code>’
property</a>
<li><a href="#border-image-tables"><span class=secno>6.8. </span>Effect
on Tables</a>
</ul>
<li><a href="#misc"><span class=secno>7. </span>Miscellaneous Effects</a>
<ul class=toc>
<li><a href="#the-box-decoration-break"><span class=secno>7.1.
</span>Drawing at Breaks: the ‘<code
class=property>box-decoration-break</code>’ property</a>
<li><a href="#the-box-shadow"><span class=secno>7.2. </span>Drop
Shadows: the ‘<code class=property>box-shadow</code>’ property</a>
</ul>
<li><a href="#definitions"><span class=secno>8. </span>Definitions</a>
<ul class=toc>
<li><a href="#glossary"><span class=secno>8.1. </span>Glossary</a>
<li><a href="#conformance"><span class=secno>8.2. </span>Conformance</a>
<li><a href="#levels"><span class=secno>8.3. </span>Levels</a>
<ul class=toc>
<li><a href="#level-1"><span class=secno>8.3.1. </span>Level 1</a>
<li><a href="#level-2"><span class=secno>8.3.2. </span>Level 2</a>
<li><a href="#level-3"><span class=secno>8.3.3. </span>Level 3</a>
</ul>
<li><a href="#exit"><span class=secno>8.4. </span> CR Exit Criteria</a>
</ul>
<li><a href="#changes"><span class=secno>9. </span> Changes</a>
<ul class=toc>
<li><a href="#changes-2012-07"><span class=secno>9.1. </span> Changes
since the 24 July 2012 Candidate Recommendation</a>
<li><a href="#changes-2012-04"><span class=secno>9.2. </span> Changes
since the 17 April 2012 Candidate Recommendation</a>
<li><a href="#changes-2012LC"><span class=secno>9.3. </span> Changes
since the 14 February 2012 “Last Call” Working Draft</a>
<li><a href="#changes-2011"><span class=secno>9.4. </span> Changes Since
the 15 February 2011 Candidate Recommendation</a>
<li><a href="#changes-2009"><span class=secno>9.5. </span> Changes Since
the 17 December 2009 Candidate Recommendation</a>
</ul>
<li><a href="#acknowledgments"><span class=secno>10.
</span>Acknowledgments</a>
<li><a href="#references"><span class=secno>11. </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 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> <a
href="#ref-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="#ref-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 ‘<a
href="#box-shadow"><code class=property>box-shadow</code></a>’ property.
<p>If an element is broken into multiple boxes, ‘<a
href="#box-decoration-break"><code
class=property>box-decoration-break</code></a>’ 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="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<h2 id=values><span class=secno>2. </span> 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 <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<h3 id=placement><span class=secno>2.1. </span> Module Interactions</h3>
<p>This module replaces and extends the background and border features
defined in <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> 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 ‘<a href="#box-shadow"><code
class=property>box-shadow</code></a>’ 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>. <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
<h3 id=value-types><span class=secno>2.2. </span> Value Types</h3>
<p>The <dfn id=image><var>&lt;image&gt;</var></dfn> value type is
defined by this specification as <code class=prod><a
href="#image"><var>&lt;image&gt;</var></a> =
<var>&lt;uri&gt;</var></code>. Other value types are defined in CSS
Level 2 Revision 1 <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may expand
the definitions of these value types: for example <a href="#ref-CSS3COLOR"
rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, when combined with
this module, expands the definition of the &lt;color&gt; value type as
used in this specification. Similarly, <a href="#ref-CSS3-IMAGES"
rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a>, when combined
with this module, expands the definition of <a
href="#image"><var>&lt;image&gt;</var></a> 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><span class=secno>2.3. </span>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> <a
href="#ref-CSS3-TRANSITIONS"
rel=biblioentry>[CSS3-TRANSITIONS]<!--{{CSS3-TRANSITIONS}}--></a> 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><span class=secno>3. </span> 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 (‘<a href="#background-color"><code
class=property>background-color</code></a>’) and images (‘<a
href="#background-image"><code
class=property>background-image</code></a>’) 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 ‘<code
class=property>transparent</code>’ value on ‘<a
href="#background-color"><code
class=property>background-color</code></a>’.
<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 ‘<a
href="#background-image"><code
class=property>background-image</code></a>’ property. Note that a value
of ‘<code class=property>none</code>’ 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 ‘<a href="#background-origin"><code
class=property>background-origin</code></a>’ and ‘<a
href="#background-repeat"><code
class=property>background-repeat</code></a>’ 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 t 8348 he <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>Base Color: the
‘<a href="#background-color"><code
class=property>background-color</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-color>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://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>
</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 ‘<a
href="#background-clip"><code class=property>background-clip</code></a>’
value associated with the bottom-most background image.
<h3 id=the-background-image><span class=secno>3.3. </span>Image Sources:
the ‘<a href="#background-image"><code
class=property>background-image</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-image>background-image</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><a href="#bg-image"><var>&lt;bg-image&gt;</var></a> [ , <a
href="#bg-image"><var>&lt;bg-image&gt;</var></a> ]*
<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 id=bg-image><var>&lt;bg-image&gt;</var></dfn> = <a
href="#image"><var>&lt;image&gt;</var></a> | none</pre>
<p>A value of <dfn id=none
title="''none''!!'background-image' value">‘<code
class=css>none</code>’</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 ‘<a href="#background-image"><code
class=property>background-image</code></a>’ interacts with other
comma-separated background properties to form each background image layer.
<p>When setting a background image, authors should also specify a ‘<a
href="#background-color"><code class=css>background-color</code></a>’
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> <a href="#ref-WCAG20"
rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a>. 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 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:
<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>Tiling Images:
the ‘<a href="#background-repeat"><code
class=property>background-repeat</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-repeat>background-repeat</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><a href="#repeat-style"><var>&lt;repeat-style&gt;</var></a> [ ,
<a href="#repeat-style"><var>&lt;repeat-style&gt;</var></a> ]*
<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
id=repeat-style><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
<p>Single values for <a
href="#repeat-style"><var>&lt;repeat-style&gt;</var></a> have the
following meanings:
<dl>
<dt><dfn id=repeat-x>‘<code class=css>repeat-x</code>’</dfn>
<dd> Computes to ‘<code class=css>repeat no-repeat</code>’.
<dt><dfn id=repeat-y>‘<code class=css>repeat-y</code>’</dfn>
<dd> Computes to ‘<code class=css>no-repeat repeat</code>’.
<dt>‘<code class=css>repeat</code>’
<dd> Computes to ‘<code class=css>repeat repeat</code>’.
<dt>‘<cod 7E1 e class=css>space</code>’
<dd> Computes to ‘<code class=css>space space</code>’
<dt>‘<code class=css>round</code>’
<dd> Computes to ‘<code class=css>round round</code>’
<dt>‘<code class=css>no-repeat</code>’
<dd> Computes to ‘<code class=css>no-repeat no-repeat</code>’
</dl>
<p>If a <a href="#repeat-style"><var>&lt;repeat-style&gt;</var></a>
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 title="''repeat''!!'background-repeat' value">‘<code
class=css>repeat</code>’</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-area0>background painting area</a>.
<dt><dfn id=space title="''space''!!'background-repeat' value">‘<code
class=css>space</code>’</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 <a class=index
href="#background-painting-area" id=background-painting-area1>background
painting area</a> is larger than the background positioning area, then
the pattern repeats to fill the background painting area. The value of
‘<a href="#background-position"><code
class=property>background-position</code></a>’ 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 ‘<a
href="#background-position"><code
class=property>background-position</code></a>’ determines its position
in this direction.
<dt><dfn id=round title="''round''!!'background-repeat' value">‘<code
class=css>round</code>’</dfn>
<dd> The image is repeated as often as will fit within the <a class=index
href="#background-positioning-area"
id=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
the formula under ‘<a href="#background-size"><code
class=property>background-size</code></a>’. If the <a class=index
href="#background-painting-area" id=background-painting-area2>background
painting area</a> is larger than the background positioning area, then
the pattern repeats to fill the background painting area.
<dt><dfn id=no-repeat
title="''no-repeat''!!'background-repeat' value">‘<code
class=css>no-repeat</code>’</dfn>
<dd> The image is placed once and not repeated in this direction.
</dl>
<p>Unless one of the two keywords is ‘<code
class=css>no-repeat</code>’, 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">   <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 ‘<a href="#repeat-y"><code
class=css>repeat-y</code></a>’: 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 ‘<code class=property>space</code>’:
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 ‘<a href="#background-repeat"><code
class=property>background-repeat</code></a>’ interacts with other
comma-separated background properties to form each background image layer.
<h3 id=the-background-attachment><span class=secno>3.5. </span>Affixing
Images: the ‘<a href="#background-attachment"><code
class=property>background-attachment</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-attachment>background-attachment</dfn>
<tr>
<th><a href="#values">Value</a>:
<td><a href="#attachment"><var>&lt;attachment&gt;</var></a> [ , <a
href="#attachment"><var>&lt;attachment&gt;</var></a> ]*
<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 id=viewport>viewport</em>
(<dfn id=fixed>‘<code class=css>fixed</code>’</dfn>) or scroll along
with the element (<dfn id=scroll>‘<code
class=css>scroll</code>’</dfn>) or its contents (<dfn id=local>‘<code
class=css>local</code>’</dfn>). The property's value is given as a
comma-separated list of &lt;attachment&gt; keywords where
<pre class=prod><dfn
id=attachment><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
<dl>
<dt><dfn id=fixed0>fixed</dfn>
View remainder of file in raw view