Properties with Colors and Backgrounds in CSS

Foreground color: the 'color' property
The color property describes the foreground color of an element.
Sample code is given below copy and try it out...

 
 h1 {
  color: #990099;
 }
 h3{
  color: #999999;
 }
 p {
  color: #990099;
 }

'background-color' property
The background-color property describes the background color of elements.
Sample code is given below copy and try it out...

 
 h1 {
  background-color: #990099;
 }
 h3{
  background-color: #999999;
 }
 p {
  background-color: #990099;
 }

Background images [background-image]
The CSS property background-image is used to insert a background image.
Sample code is given below copy and try it out...

 

body {
 background-color: #FFCC66;
 background-image: url("016.jpg");
     }

Repeat background image [background-repeat]
This property describes whether background image has to repeat or not,because if given by default it will repeat horizontally.
background-repeat: repeat - image will be repeated both horizontally and vertically
background-repeat: repeat-x - image will be repeated both horizontally
background-repeat: repeat-y - image will be repeated both vertically
background-repeat: no-repeat - image will not repeat
Sample code is given below copy and try it out...

 
body {
 background-color: #FFCC66;
 background-image: url("8701.gif");
 background-repeat: repeat
 /*background-repeat: repeat-x*/
 /*background-repeat: repeat-y*/
 /*background-repeat: no-repeat*/
     }

Lock background image [background-attachment]
The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
Background-attachment: scroll - The image scrolls with the page - unlocked
Background-attachment: fixed - The image is locked

 
body {
 background-color: #FFCC66;
 background-image: url("8701.gif");
 background-repeat: repeat
 background-attachment: fixed;
 /*background-attachment: scroll;*/
 }

Place background image [background-position]
This property will help you to change the default position of image and we can set image in a fixed position.
background-position: 3cm 3cm - The image is positioned 3 cm from the left and 3 cm down the page
background-position: 50% 25% - The image is centrally positioned and one fourth down the page
background-position: top right - The image is positioned in the top-right corner of the page

 
 body {
 background-color: #FFCC66;
 background-image: url("8701.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
      }

Compiling [background]
From the above example we saw that we used different background properties together,we can compile these properties to a single unit and develop a single line of code.
for example the above codecan be rewritten as source code gven below :

 
background: #FFCC66 url("8701.gif") no-repeat fixed right bottom;

If a property is left out, it will automatically be set to its default value.

Judul: Properties with Colors and Backgrounds in CSS
Ditulis oleh Unknown
Rating Blog 5 dari 5