The CSS background property is used to define the backgrounds of HTML elements. you can see different properties and their uses in the below table. 
Property Description
Background-color To define the background color of an element.
Background-image To define the background image of an element.
Background-repeat To control the repetition of the background image.
Background-position To specify the position of the background image
Background-attachment To control the scrolling of the background images.








Background-color
Example: Setting background-color for HTML element.
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#p2 {background-color: tomato;}
	</style>
</head>
<body>
<p id="p2"> This paragraph has a tomato background color. </p>
</body>
</html>
Output 

This paragraph has a tomato background color.

Background-image
Example: Setting background-image
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#b1 {background-image: url("logo.png");}
	</style>
</head>
<body id="b1">
<p id="p2"> This is aparagraph. </p>
</body>
</html>
Output










Background-repeat
From the above example output, the background image is repeated by default. because the image size is very small. So, in a background-repeat property, we have two options.
  1. If you want to repeat the background image even if the image size is large you can set repeat.
  2. If you don't want to display images only once you can set no-repeat.
Example: Set background image no-repeat value

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#b1 {background-image: url("logo.png");
		background-repeat: no-repeat;
		 }
	</style>
</head>
<body id="b1">
<p id="p2"> This is a  paragraph.</p>
</body>
</html>
Output









Background-position
Example: This example shows how to set background image position 50px from left and  50px from top.
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#b1 {background-image: url("logo.png");
		background-position: 50px  50px;
		 }
	</style>
</head>
<body id="b1">
<p id="p2"> This is a  paragraph.</p>
</body>
</html>
Output







Background-attachment
By using the background-attachment attribute you can set the background image as fixed or scrollable. 
Example: set background image fixed
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#b1 {background-image: url("logo.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		 }
	</style>
</head>
<body id="b1">
<p id="p2"> This is a  paragraph.</p>
</body>
</html>
Output