CSS Tutorials

adplus-dvertising
Backgrounds In CSS
Previous Home Next

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
  2. 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);
      
  3. 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
  4. 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
  5. 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;
      }
      
  6. 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";
      
Previous Home Next