CSS Background Properties Guide

There are four types of background styles: background color, background image style, background image repetition, and background image fixation.
::: normal-demo Background Color

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div
       {
           width:100px;
           height:60px;
       }
       #div1{background-color: hotpink}
       #div2{background-color: #87CEFA;}
    </style>
</head>
<body>
    <div id="div1">Background color is: hotpink</div>
    <div id="div2">Background color is: #87CEFA</div>
</body>
</html>

:::

background-repeat (Background Image Repetition)

::: normal-demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div
       {
           width:100px;
           height:60px;
       }
       #div1{background-repeat: no-repeat}
       #div2{background-repeat: repeat-x}
       #div3{background-repeat: repeat-y}
       #div4{background-repeat: repeat}
    </style>
</head>
<body>
    <div id="div1">Background repeat: no-repeat</div>
    <div id="div2">Background repeat: repeat-x</div>
    <div id="div3">Background repeat: repeat-y</div>
    <div id="div4">Background repeat: repeat</div>
</body>
</html>

:::

background-position (Background Image Position)

::: normal-demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div
       {
           width:100px;
           height:60px;
       }
       #div1{background-position: left top}
       #div2{background-position: right bottom}
       #div3{background-position: center center}
    </style>
</head>
<body>
    <div id="div1">Background position: left top</div>
    <div id="div2">Background position: right bottom</div>
    <div id="div3">Background position: center center</div>
</body>
</html>

:::

background-attachment (Background Image Fixation)

::: normal-demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
       div
       {
           width:100px;
           height:60px;
       }
       #div1{background-attachment: scroll}
       #div2{background-attachment: fixed}
    </style>
</head>
<body>
    <div id="div1">Background attachment: scroll</div>
    <div id="div2">Background attachment: fixed</div>
</body>
</html>

:::