Page 113 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

3. RGB value: You can define colors with the use of RGB values, by simply entering the Notes
values for amounts of Red, Green and Blue.
For example: .myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}

You can also define RGB colors using percentage values for the amounts of Red, Green and
Blue:
For example: .myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}

Setting Background Colors

Background colors are defined similar to the colors mentioned above. For example you can set
the background color of the entire page using the BODY selector:
BODY {background-color:#FF6666;}
1. Setting a background image: CSS lets you set a background image for both the page and
single elements on the page.
In addition, CSS offers several positioning methods for background images.
You can define the background image for the page like this:

BODY {background-image:url(myimage.gif);}
2. You can control the repetition of the image with the background-repeat property.
a. background-repeat:repeat: Tiles the image until the entire page is filled, just like an
ordinary background image in plain HTML.
b. background-repeat:repeat-x: Repeats the image horizontally - but not vertically.
c. background-repeat:repeat-y: Repeats the image vertically - but not horizontally.
d. background-repeat:no-repeat: Does not tile the image at all.

3. Positioning a background: Background positioning is done by entering a value for the left
position and top position separated by a space.
In this example the image is positioned 75 pixels from the upper left corner of the page:

BODY {background-image:url(myimage.gif); background-position: 75px 75px;}

Notes Background positioning is not supported by Netscape 4 browsers.
4. Fixing a background: You can fixate an image at a certain position so that it doesn't move
when scrolling occurs.

BODY {background-image:url(myimage.gif); background-attachment: fixed;}

Notes Background fixation is not supported by Netscape 4 browsers.
5. Setting multiple background values: Rather than defining each background property with
its own property you can assign them all with the use of the background property.

Look at this example:
BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;}

LOVELY PROFESSIONAL UNIVERSITY 107