Pages

Thursday 7 March 2013

CSS Styling 1: Background and colour

Within the styling of backgrounds there are many different properties such as colour,image,repeat,attachment,position. The background syntax's go within the style tags.

Background colour:
To change the colour of the whole background the syntax must go:
body {background-color:#b0c4de;}
This is so the whole body of text has a background. If you wanted to have certain colour behind certain text you would change the body for h1,h2,h3,p or div.

Background image:
If you want the background to be an image the syntax should look like this:
body {background-image:url ('paper.gif ');}
The words inside the normal brackets is the name and type of file containing that image. It doesn't matter what type of image it is it will still work. Just like the colour of the background you can replace the selector for a different selector.With background images you can choose which way to repeat the image as normally the image with repeat both vertically and horizontally.
You can make the image repeat horizontally only by entering this declaration on the end of your background code.
background-repeat:repeat-x;
If you want have an image in a set position with no repeat you should replace repeat-x with no-repeat and then add another declaration saying where to put the image like this:
background-position:right top;.
It's also possible to write all of this syntax in shorthand by all writing it like it's all one long property like this:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When writing shorthand this is the order the properties should be listed in:
  1. background-colour
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
Also when adding a background you must make sure that your text is still readable

Colour:
Colour can be given in a hex value an RGB value and a Colour name
Hex value - '#ff0000'
RGB value - 'rgb(255,0,0)'
Colour name - red
In this image there is a small sample of the colour that can be used:






No comments:

Post a Comment