colors.html

CSS lets learn this step by step...

<div class="propdef">
<dl><dt>
<span class="index-def" title="'background-attachment'"><a name="propdef-background-attachment" class="propdef-title"><strong>'background-attachment'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>scroll | fixed | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>scroll
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>If a background image is specified, this property specifies
whether it is fixed with regard to the <a
href="visuren.html#viewport">viewport</a> ('fixed') or scrolls along with the
document ('scroll').

<p>Even if the image is fixed, it is still only visible when it is in
the background or padding area of the element. Thus, unless the image
is tiled ('background-repeat: repeat'), it may be invisible.

<div class="example"><P style="display:none">Example(s):</P><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 may treat 'fixed' as 'scroll'. However, it is
recommended they interpret 'fixed' correctly, at least for the HTML and
BODY elements, since there is no way for an author to provide an image
only for those browsers that support 'fixed'. See the section on <a
href="conform.html#conformance">conformance</a> for details.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'background-position'"><a name="propdef-background-position" class="propdef-title"><strong>'background-position'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[ [<a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> ]{1,2} | 
[ [top | center | bottom] || [left | center | right] ] ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>0% 0%
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>block-level and replaced elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to the size of the box itself
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P> If a background image has been specified, this property specifies
its initial position. Values have the following meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x8" href="syndata.html#value-def-percentage" class="noxref"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 <span class="index-inst" title="&lt;percentage&gt;"><a name="x9" href="syndata.html#value-def-percentage" class="noxref"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
<dd> With a value pair of '0% 0%', the upper left corner of the image
is aligned with the upper left corner of the box's <a
href="box.html#padding-edge">padding edge</a>.  A value pair of
'100% 100%' places the lower right corner of the image in the lower
right corner of padding area. With a value pair of '14% 84%', the point
14% across and 84% down the image is to be placed at the point 14%
across and 84% down the padding area.

<dt><span class="index-inst" title="&lt;length&gt;"><a name="x10" href="syndata.html#value-def-length" class="noxref"><span
class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
 <span class="index-inst" title="&lt;length&gt;"><a name="x11" href="syndata.html#value-def-length" class="noxref"><span
class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
<dd> With a value pair of '2cm 2cm', the upper left corner of the image
is placed 2cm to the right and 2cm below the upper left corner of the
padding area.
<dt>
<dt><strong>top left</strong> and <strong>left top</strong>
<dd>Same as '0% 0%'.
<dt><strong>top</strong>, 
    <strong>top center</strong>, and 
    <strong>center top</strong>
<dd>Same as '50% 0%'.
<dt><strong>right top</strong> and <strong>top right</strong>
<dd>Same as '100% 0%'.
<dt><strong>left</strong>, <strong>left center</strong>,
    and <strong>center left</strong>
<dd>Same as '0% 50%'.
<dt><strong>center</strong> and <strong>center center</strong>
<dd>Same as '50% 50%'.
<dt><strong>right</strong>, <strong>right center</strong>,
     and <strong>center right</strong>
<dd>Same as '100% 50%'.
<dt><strong>bottom left</strong> and <strong>left bottom</strong>
<dd>Same as '0% 100%'.
<dt><strong>bottom</strong>, 
    <strong>bottom center</strong>, and 
    <strong>center bottom</strong>
<dd>Same as '50% 100%'.
<dt><strong>bottom right</strong>
     and <strong>right bottom</strong>
<dd>Same as '100% 100%'.
</dl>

<P> If only one percentage or length value is given, it sets the
horizontal position only, the vertical position will be 50%. If two
values are given, the horizontal position comes first. Combinations of
length and percentage values are allowed, (e.g., '50% 2cm'). Negative
positions are allowed. Keywords cannot be combined with percentage
values or length values (all possible combinations are given above).

<div class="example"><P style="display:none">Example(s):</P><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>

<P> If the background image is fixed within the viewport (see the
<a href="colors.html#propdef-background-attachment" class="noxref"><span
class="propinst-background-attachment">'background-attachment'</span></a>
property), the image is placed relative to the viewport instead of the
element's padding area. For example,

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} 
</PRE>

<P> In the example above, the (single) image is placed in the lower-right
corner of the viewport.
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'background'"><a name="propdef-background" class="propdef-title"><strong>'background'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[<a href="colors.html#propdef-background-color" class="noxref"><span class="propinst-background-color">&lt;'background-color'&gt;</span></a> || <a href="colors.html#propdef-background-image" class="noxref"><span class="propinst-background-image">&lt;'background-image'&gt;</span></a> || <a href="colors.html#propdef-background-repeat" class="noxref"><span class="propinst-background-repeat">&lt;'background-repeat'&gt;</span></a>
|| <a href="colors.html#propdef-background-attachment" class="noxref"><span class="propinst-background-attachment">&lt;'background-attachment'&gt;</span></a> || <a href="colors.html#propdef-background-position" class="noxref"><span class="propinst-background-position">&lt;'background-position'&gt;</span></a>] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>not defined for shorthand properties
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>allowed on 'background-position'
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P> The <a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a> property
is a shorthand property for setting the individual background
properties (i.e., <a href="colors.html#propdef-background-color" class="noxref"><span
class="propinst-background-color">'background-color'</span></a>, <a href="colors.html#propdef-background-image" class="noxref"><span
class="propinst-background-image">'background-image'</span></a>, <a href="colors.html#propdef-background-repeat" class="noxref"><span
class="propinst-background-repeat">'background-repeat'</span></a>, <a href="colors.html#propdef-background-attachment" class="noxref"><span
class="propinst-background-attachment">'background-attachment'</span></a>
and <a href="colors.html#propdef-background-position" class="noxref"><span
class="propinst-background-position">'background-position'</span></a>) at
the same place in the style sheet.

<P> The <a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a> property
first sets all the individual background properties to their initial
values, then assigns explicit values given in the declaration.

<div class="example"><P style="display:none">Example(s):</P><P> 
In the first rule of the following example, only a value for <a href="colors.html#propdef-background-color" class="noxref"><span
class="propinst-background-color">'background-color'</span></a> has been
given and the other individual properties are set to their initial
value. In the second rule, all individual properties have been
specified.

<PRE>
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
</PRE>
</div>

<H2>14.3 <a name="gamma-correction">Gamma correction</a></H2>

<P><em>For information about gamma issues, please consult the the
Gamma Tutorial in the PNG specification (<a href="refs.html#ref-PNG10" rel="biblioentry" class="noxref"><span class="normref">[PNG10]</span></a>).</em></P>

<P> In the computation of gamma correction, UAs displaying on a CRT
may assume an ideal CRT and ignore any effects on apparent gamma
caused by dithering. That means the minimal handling they need to do
on current platforms is:
  <DL>
    <DT> PC using MS-Windows
    <DD> none
    <DT> Unix using X11
    <DD> none
    <DT> Mac using QuickDraw
    <DD> apply gamma 1.45 <a href="refs.html#ref-ICC32" rel="biblioentry" class="noxref"><span class="normref">[ICC32]</span></a> (ColorSync-savvy applications
      may simply pass the sRGB ICC profile to ColorSync
      to perform correct color correction)
    <DT> SGI using X
    <DD> apply the gamma value from
    <TT>/etc/config/system.glGammaVal</TT> (the default value being
    1.70; applications running on Irix 6.2 or above may simply pass
    the sRGB ICC profile to the color management system)
    <DT> NeXT using NeXTStep
    <DD> apply gamma 2.22
  </DL>

<P>"Applying gamma" means that each of the three R, G and B must be
converted to R'=R<SUP>gamma</SUP>, G'=G<SUP>gamma</SUP>,
B'=B<SUP>gamma</SUP>, before being handed to the OS.

<P>This may rapidly be done by building a 256-element lookup table
once per browser invocation thus:

<PRE>
for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end
</PRE>

<P>which then avoids any need to do transcendental math per color
attribute, far less per pixel.

<hr class="navbar">

<div class="navbar" align="center">
<p><a href="page.html">previous</a> &nbsp;
<a href="fonts.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</HTML>