Colors and Background using CSS
The color property describes the foreground color of an element.
For example, to make all <h1> headlines in a document dark red.
h1 {
color: #ff0000;
}
Colors can be entered as hexadecimal values (#ff0000) or you can use the names of the colors (red) or rgb values (rgb(255,0,0)).
The background-color property describes the background color of elements.
The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element. You can also apply background colors to other elements including headlines and text.
body {
background-color: yellow;
}
h1 {
color: red;
background-color: white;
}
The CSS property background-image is used to insert a background image.
To insert the image as a background image for a web page, simply apply the background-image property to <body>and specify the location of the image.
body {
background-color: white;
background-image: url("bg_image.jpg");
}
By default, the image is repeated both horizontally and vertically to cover the entire screen. The property background-repeat controls this behaviour.
- 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)
The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.
- background-attachment: scroll (The image scrolls with the page - unlocked)
- background-attachment: fixed (The image is locked)
By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.
There are numerous ways to set the values of background-position. All of them are formatted as a set of coordinates. The coordinates can be indicated as percentage of the browser window, fixed units (pixels) or you can use the words - top, bottom, center, left and right.
- background-position: 50% 25% (The image is centrally positioned and one-fourth down the page)
- background-position: top right (The image is positioned in the top-right corner of the page)
Compiling: background
The property background is a short hand for all the background properties. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.
For example,
background-color: #FFCC66;
background-image: url("globe.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Using background, the same result can be achieved in just one line of code:
background: #FFCC66 url("globe.gif") no-repeat fixed right bottom;
The list of order is as follows:
- [background-color]
- [background-image]
- [background-repeat]
- [background-attachment]
- [background-position]
If a property is left out, it will automatically be set to its default value.