COLOR & BACKGROUND

NCD Style Sheet Guide v6.0

Sponsor's ADs:

+ 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, center, bottom), length, % 

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

{background-position:
 center center}
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-position-x: #1 }
{background-position-y: #2 }
  #1=Horizontal Position (left, center, right), length, %
  #2=Vertical Position (top, center, bottom), length, % 

{background-position-x:center;
 background-position-y:bottom}
Today is fine.


+ Background Grouping

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

<div style="position:relative;
 left:0; top:0; height:100; width:200;
 border-style:solid;
 background:url(back.gif) skyblue repeat-x -12px center">
Today is fine.
</div>
Today is fine.


Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading
Font | Text | List | Color & Background | Box | Table | Position & Format | Other|
Selector List | Property List

BACK TO NCD HOME
Network Communication Design - /
 Copyright & Publishing 1994-2008 Network Communication Design