CSS tutorial - part 2: colors and backgrounds

If you don’t want your website to be black and white, here is how you can color it up.

• The ‘color‘ property sets the color of an element.
  

  p {
    color: #FF0000;
  }

• The ‘background-color‘ property sets the background color of an element.
  

  body {
    background-color: #FF0000;
  }

• The ‘background-image‘ property inserts a background image.
  

  body {
    background-image: url(”image.jpg”);
  }

• The ‘backgroung-repeat‘ property controls background image behaviour.
  There are four different values:
  • background-repeat: repeat-x; - the image is repeated horizontally
  • background-repeat: repeat-y; - the image is repeated vertically
  • background-repeat: repeat; - the image is repeated both horizontally and vertically
  • background-repeat: no-repeat; - the image is not repeated

  For example I want image to apear only once:

  body {
    background-repeat: no-repeat;
  }

• The ‘background-attachment‘ property defines whether a background picture is fixed or scrolls along with the containing element.
  There are two different values:
  • background-attachment: scroll; - the image scrolls with the page - unlocked
  • background-attachment: fixed; - the image is fixed on one place - locked

  body {
    background-attachment: fixed;
  }

• The ‘background-position‘ property defines the background image position on the screen. By default it’s set to top left corner. The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The code looks like this:
  

  body {
    background-position: right bottom;
  }

• There is also ‘background‘ property that can combine all previous background elements. So you get only one line of code which makes it easier to read. The order of properties is: background-color background-image background-repeat background-attachment background-position. If the property is not set, the default property is used.
  

  body {
    background: #FF0000 url(”image.jpg”) no-repeat fixed right bottom;
  }

So now you can colorize your website. There is so much more that you can do with CSS, basicaly everything!

This entry was posted on Jan 7 and is filed under css, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.