CSS Background Property

CSS Background property is used to apply background color or background image on HTML element. By default, the image is repeated both horizontally and vertically.

CSS Background Properties	Description
background-color	Specify the background color to be used.
background-image	Specify the background image to be used. Syntax: background-image:url("picture.jpg");
background-repeat	Specifies how to repeat the background images. Syntax: background-repeat:repeat \| no-repeat \| repeat-x \| repeat-y Default is repeat
background-position	Specifies the position of the background images. Syntax: background-position: 30% 20%; background-position: 50px 100px; background-position: left top \| left center \| left bottom \| center top \| center center \| center bottom \| right top \| right center \| right bottom
background-attachment	Specifies whether the background images are fixed or scrolls. Syntax: background-attachment:fixed \| scroll Default is scroll

CSS background-color

The background-color property is used to apply the background color of any HTML element. Ver CSS1.

Example 1: Change the document, h1, p background color

<html>
<head>
    <style>
        body { 
            background-color: #ffc;
        }
        h1 {
            background-color: #00ff00;
        }
        p {
            background-color: rgb(255,0,255);
        }
    </style>
</head>
<body>
    <h1>This is heading 1</h1>
    <p>This is a paragraph.</p>
</body>
</html>

CSS background-image

The background-image property is used to apply an image in the background of any HTML element. Ver CSS1.

By default, a background image is placed in the top-left corner of any element, and repeated both vertically and horizontally.