✖

All TalkersCode Topics

Follow TalkersCode On Social Media

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;
}
❮ PrevNext ❯