CSS Background Properties are used to set unique background styles for the HTML Elements. We can set background styles of almost any HTML Element in any way we like.
Table of Contents
There are many CSS Background Properties that are used to set background styles of HTML elements. Following are their names.
- background-color
- background-image
- background-position
- background-attachment
- background-repeat
CSS Background Color
CSS Background Color property ( background-color ) is the most common css property used while making websites or web pages.
As the name suggests CSS Background Color property is used to define the background color of HTML Element.
CSS Background Color Syntax
The Syntax of background-color property is shown below.
body
{
background-color:red;
}
A Color value can be specified using a valid color name, hex value of css color or rgba value of css color.
Also see CSS Colors for more information.
CSS Background Image
CSS Background Image property ( background-image ) is used to use any image as background image of HTML Element.
The image repeats itself if it's size is smaller than the size of html element, to cover it completely.
CSS Background Image Syntax
The Syntax of background-image property is shown below.
body
{
background-image:url("car.png");
}
CSS Background Position
CSS Background Position property ( background-position ) is used to set the position of your background image.
CSS Background Position Syntax
The Syntax of background-position property is shown below.
body
{
background-image:url("car.png");
background-position:right;
}
CSS Background Attachment
CSS Background Attachment property ( background-attachment ) defines the scrolling behavior of background image. it defines that if your background image will move with the page on scrolling or it will be fixed.
Fixing your background image gives a unique effect when you scroll your web page.
CSS Background Attachment Syntax
The Syntax of background-attachment property is shown below.
body
{
background-image:url("car.png");
background-attachment:fixed;
}
CSS Background Repeat
CSS Background Repeat property ( background-repeat ) defines if background image should repeat itself to cover the whole HTML element or not.
By default the background image repeats itself both horizontally and vertically, if it's size is smaller than HTML element.
CSS Background Repeat Syntax
We can either repeat the image vertically ( repeat-y ) or horizontally ( repeat-x ) or set it to (no-repeat) so that it doesn't repeat itself at all.
Horizontal Repeat
body
{
background-image:url("car.png");
background-repeat:repeat-x;
}
Vertical Repeat
body
{
background-image:url("car.png");
background-repeat:repeat-y;
}
No Repeat
body
{
background-image:url("car.png");
background-repeat:no-repeat;
}