✖

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 ❯