Select Chapter ❯
CSS Tutorial
- CSS Introduction
- CSS Syntax
- CSS Insert CSS
- CSS Backgrounds
- CSS Text
- CSS Dimensions
- CSS Border
- CSS Margin
- CSS Padding
- CSS Display
- CSS Positioning
- CSS Float
- CSS Pseudo-Class
- CSS Opacity
- CSS Media Types
CSS3 Tutorial
CSS Backgrounds
You can set various background properties like background color, background image etc.
Background Color
This property is used to set the background color to any element
div
{
background-color:red;
}
Background Image
This property is used to set the image to be displayed in the background of an element
div
{
background-image: url("demo.jpg");
}
You can repeat the background image horizontally or vertically using background-repeat property.
div
{
background-image: url("demo.jpg");
background-repeat: repeat-y;
}
or
div
{
background-image: url("demo.jpg");
background-repeat: repeat-x;
}
or
div
{
background-image: url("demo.jpg");
background-repeat: no-repeat;
}
repeat-y can repeat the image vertically and repeat-x repeat the image horizontally or you can use no-repeat to not the repeat the image
Background Position
You can set the background image position.
div
{
background: red url("img1.jpg") no-repeat;
background-position: top left;
}
Background
This is the short property to set all background properties in one line.
div
{
background: red url("img1.jpg") no-repeat top left;
}