CSS Tutorials

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more.

CSS properties used for background :

1. Background Colors : The background-color property is used to specify a solid background color

background-color: value;

Values:

• color name:

  background-color: yellow;
  

• hexadecimal number: Hexadecimal color values are supported in all major browsers.

  background-color: #FFFF00;
  

• RGB color code: RGB color values are supported in all major browsers.An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

  background-color: rgb(255,255,0);
  

2. Background image: You can set an image for the background of an element using the background-image property.

   background-image: url("image.gif");
   

   Values:

   • url
   • none

3. Background Position: You can position an image used for the background of an element using the background-position property.

   background-position: value;
   

   Values:

   • top left
   • top center
   • top right
   • enter center
   • center right
   • bottom left
   • bottom center
   • bottom right
   • x-% y-%
   • x-pos y-pos

4. Background Repeat: You can set if an image set as a background of an element is to repeat (across=x and/or down=y) the screen using the background-repeat property.

   background-repeat: value;
   

   Values:

   • repeat: The background image will be repeated both vertically and horizontally. This is default

     body {
     background-image: url("image.gif");
     }
     

   • no-repeat:The background-image will not be repeated

     body {
     background-image: url("image.gif");
     background-repeat: no-repeat;
     }
     

   • repeat-x: The background image will be repeated only horizontally

     body {
     background-image: url("image.gif");
     background-repeat: repeat-x;
     }
     

   • repeat-y: The background image will be repeated only vertically

     body {
     background-image: url("image.gif");
     background-repeat: repeat-y;
     }
     

5. Background Attachment:If you are using an image as a background. You can set whether the background scrolls with the page or is fixed when the user scrolls down the page with the background-attachment property.

   background-attachment: value;
   

   Values:

   • scroll: The background scrolls along with the element. This is default

     background-attachment: scroll;
     

   • fixed: The background is fixed with regard to the viewport

     background-attachment: "fixed";