Working with Backgrounds in CSS
Working with Backgrounds
In this tutorial, you will learn about background properties and its usage, following background properties are used in CSS
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
Using background-color property you can change background colour for an HTML
element. For example:
p{
background-color:red;
}
body{
background-color:00ffcc;
}
background-image
Using background-image property you can change background image. For example:
p{
background-image:url(images/bg.gif);
}
body{
background-image:url(images/bg1.gif);
}
background-repeat
Valid values are: repeat, repeat-x, repeat-y, and no-repeat. A value
of repeat, repeats the background horizontally and vertically. repeat-x only
repeats the background in the horizontal direction, repeat-y vertical direction.
And as you might have thought no-repeat does not repeat the background at all.
| Code |
Description |
| background-repeat: repeat |
This is the default setting. Tiles the image both horizontally and vertically. |
| background-repeat: repeat-x |
Tiles the image in the horizontal direction only. Good if you want the background running across the top of the page. |
| background-repeat: repeat-y |
Tiles the image in the vertical direction only. Great for left-hand page borders! |
| background-repeat: no-repeat |
No repeating takes place; only one copy of the image is displayed. This is good if you want to use a big image that isn't designed to tile. |
background-attachment
There are two values for background-attachment, scroll and fixed. A
valid you of scroll is what is common with browsers today. The background scrolls
along as you do. A value of fixed will keep the background fixed, with the text
and other goodies scrolling on top of it.
background-position
Background positioning is done by entering a value for the left position
and top position separated by a space.