COLOR & BACKGROUND

NCD Style Sheet Guide v5.0

+ CSS1 Color Name List

 New color names are proposed in Style Sheet.
Color Name List


+Foreground Color

{color: # }   #=color(#rrggbb or name)

<head><style type="text/css"><!--
   FONT {color:red}
--></style></head>
<FONT SIZE=4>Today is fine.</FONT>
Today is fine.

+Background Color

{background-color: # }
  #=color(#rrggbb or name), transparent 

<head><style type="text/css"><!--
   FONT {color:white;
         background-color:blue}
--></style></head>
<FONT SIZE=4>Today is fine.</FONT>
Today is fine.

+Background Image

{background-image: url(#) }   #=image file
{background-image: # }   #=none 

<DIV STYLE="background-image: URL(back.gif)">
Today is fine. Long before ...
to predict upcoming changes in weather.
</DIV>
Today is fine. Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.


+ Background Repeat

{background-repeat: # }
    #=repeat, no-repeat, repeat-x, repeat-y 

<DIV STYLE="position:relative; left:0; top:0;
 height:100; width:200; border-style:solid;
 background-image:url(back.gif);
 background-repeat:#">
Today is fine. Today is fine.<BR>
	...
Today is fine. Today is fine.<BR>
</DIV>

{background-repeat:repeat}
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
{background-repeat:no-repeat}
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
{background-repeat:repeat-x}
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
{background-repeat:repeat-y}
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.
Today is fine. Today is fine.


+ Background Attachment

{background-attachment: # }
  #=scroll, fixed 

<DIV STYLE="position:relative; left:0; top:0;
 height:100; width:200; border-style:solid; overflow:scroll;
 background-image:url(back.gif);
 background-attachment:#">
Today is fine....Today is fine.
</DIV>

{background-attachment:scroll}
Today is fine. Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine. 
{background-attachment:fixed}
Today is fine. Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.Today is fine.


+ Background Position

{background-position: #1 #2}
  #1=Horizontal Position (left, center, right), length, %
  #2=Vertical Position (top, middle, bottom), length, % 

<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background-image:URL(back.gif); 
 background-attachment:no-repeat;
 background-position:#1 #2">
<TR><TD>
Today is fine.
</TABLE>

{background-position:
 center middle}
Today is fine. 
{background-position:
 25% 75%}
the point (25%,75%) of the image
is to be placed at the point (25%,75%)
of the element.

Today is fine. 
{background-position:
 100px 25px}
Today is fine.


+ Background Grouping

Grouping
{background: url(#) #color #repeat #attachment #position}

<TABLE WIDTH=200 HEIGHT=100 BORDER
 STYLE="background:URL(back.gif)
 black repeat-y -12px middle">
<TR><TD>
Today is fine.
</TABLE>
Today is fine.


Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading | Font | Text | List | Color & Background |
Box | Box Positioning | Other|
Style Property LIST

BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
 Copyright & Publishing 1994-1999 Yuriko Ienaga yuri@ncdesign.org