8000 csswg-drafts/css4-background/Overview.html at 799d50e1bc1388276b7ee08199e1885f6aeab234 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
executable file
·
5528 lines (4090 loc) · 182 KB

Overview.html

File metadata and controls

executable file
·
5528 lines (4090 loc) · 182 KB
<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>
(<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=ltattachmentgt><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
<dl>
<dt><dfn id=fixed0>‘<code class=css>fixed</code>’</dfn>
<dd>The background is fixed with regard to the viewport. In paged media
where there is no viewport, a ‘<a href="#fixed0"><code
class=css>fixed</code></a>’ 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 ‘<code class=property>overflow</code>’ property <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a ‘<a
href="#fixed0"><code class=css>fixed</code></a>’ background doesn't
move with the element.</span>
<dt><dfn id=local0>‘<code class=css>local</code>’</dfn>
<dd>The background is fixed with regard to the element's contents: if the
element has a scrolling mechanism, the background scrolls with the
element's contents. 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 ‘<code
class=css>border-box</code>’ value of ‘<a
href="#background-clip"><code
class=property>background-clip</code></a>’ as ‘<code
class=css>padding-box</code>’ in cases where ‘<a
href="#background-attachment"><code
class=property>background-attachment</code></a>’ is ‘<a
href="#local0"><code class=css>local</code></a>’ and the contents of
the element scroll.
<dt><dfn id=scroll0>‘<code class=css>scroll</code>’</dfn>
<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.)
</dl>
<p>Even if the image is fixed, it is still only visible when it is in the
<a href="#background-painting-area"><em class=index
id=background-painting-area3>background painting area</em></a> 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 ‘<a href="#fixed0"><code
class=css>fixed</code></a>’ backgrounds (for example due to limitations
of the hardware platform) should ignore declarations with the keyword
‘<a href="#fixed0"><code class=css>fixed</code></a>’. 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 ‘<a href="#background-attachment"><code
class=property>background-attachment</code></a>’ 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 ‘<a
href="#background-position"><code
< 887A /div>
class=property>background-position</code></a>’ property</h3>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td><dfn id=background-position>background-position</dfn>
<tr>
<th>Value:
<td><a href="#ltpositiongt"><var>&lt;position&gt;</var></a> [ , <a
href="#ltpositiongt"><var>&lt;position&gt;</var></a> ]*
<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>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 <a
href="#background-positioning-area"><i>background positioning
area</i></a>.
<p>Where
<pre class=prod><dfn id=ltpositiongt><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
‘<code class=property>center</code>’. 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, ‘<code class=css>background-position:
bottom 10px right 20px</code>’ represents a ‘<code
class=css>10px</code>’ vertical offset up from the bottom edge and a
‘<code class=css>20px</code>’ 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:
<pre>
<!-- -->background-position: left 10px top 15px; /* 10px, 15px */
<!-- -->background-position: left top ; /* 0px, 0px */
<!-- -->background-position: 10px 15px; /* 10px, 15px */
View remainder of file in raw view