CSS

CSS: Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-position
  5. background-attachment

CSS background properties and values :

  1. background-color: lightblue;
    a color is specified by :
    • a HEX value - like #ff0000
    • an RGB value - like rgb(255,0,0)
    • a valid color name - like red
    Example :
    
    <head>
    <style>
    h1 {
        background-color: green;
    }
    
    div {
        background-color: lightblue;
    }
    
    p {
        background-color: yellow;
    }
    </style>
    </head>
    
    
  2. background-image: url("paper.gif");
    • The background-image property specifies an image to use as the background of an element.
    • By default, the image is repeated so it covers the entire element.
    • By default, the background-image property repeats an image both horizontally and vertically.
    • The background image for a page can be set like this:
    
    <head>
    <style>
    body {
        background-image: url(paper.gif);
    }
    </style>
    </head>
    
    
  3. background-repeat: repeat-x / repeat-y / no-repeat;
    • Some images should be repeated only horizontally or vertically using background-repeat.
    • If the image is repeated only horizontally using background-repeat: repeat-x;
    • If the image is repeated only vertically using background-repeat: repeat-y;
    • If the image is repeated neither vertically nor horizontally using background-repeat: no-repeat;
  4. 
    <head>
    <style>
    body {
        background-image: url("img_tree.png");
        background-repeat: no-repeat;
    }
    </style>
    </head>
    
    
  5. background-position: right top;
    • The position of the image is specified by the background-position property:
    
    <head>
    <style>
    body {
        background-image: url("img_tree.png");
        background-repeat: no-repeat;
        background-position: right top;
    /*
    
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom
    background-position:center bottom;
    background-position:left top;
    background-position:50% 50%;
    background-position:10px 200px;
    background-position:50px 50px;
    */
    }
    </style>
    </head>
    
    
  6. background-attachment: fixed;
    • To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
      
      <head>
      <style>
      body {
          background-image: url("img_tree.png");
          background-repeat: no-repeat;
          background-position: right top;
          background-attachment: fixed;
      }
      </style>
      </head>
      
      
  7. Background - Shorthand property To shorten the code, it is also possible to specify all the background properties in one single property (i.e background). This is called a shorthand property.
    
    <head>
    <style>
    body {
        background: #ffffff url("img_tree.png") no-repeat right top;
    }
    </style>
    </head>
    
    
    When using the shorthand property the order of the property values is:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    It does not matter if one of the property values is missing.