Using the css background properties we can define the background effects of an element.
CSS background properties
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
Background Color
This property specifies the color of the background of an element.
body {background-color:#1ec7ff;}
The body will fll with given background color #1ec7ff
Background Image
This property specifies an image of the background of an element.
By specify the background image the image will spread the entire element
Below it the background property
body {background-image:url(desing.jpg);}
I have taken a small image and applied to the background it spread entire body
Background Image - Repeat
1.Horizontally
2.Vertically
By default background-image property repeats an image both horizontally and vertically.
In some cases we have to repeat the image only horizontally or vertically in that case:
body
{
background-image:url('design.jpg');
background-repeat:repeat-x;
}
background-repeat:repeat-x property is for repeat the image in x direction
body
{
background-image:url('design.jpg');
background-repeat:repeat-y;
}
background-repeat:repeat-y property is for repeat the image in y direction
Background Image - no-repeat
When we say background-image:no-repeat, it shows the image only once
We can set the background position by specifing the background-position property
body
{
background-image:url('design.jpg');
background-repeat:no-repeat;
background-position:right top
}
Instead of writing separately we can use short hand property.
body {background:#ffffff url('desing.jpg') no-repeat right top"}
