CSS Background

The CSS background properties are used to define the background effects for elements. There are lots of properties to design the background. 

CSS background properties are as follows: 

• CSS Background-color Property: The background-color property in CSS is used to specify the background color of an element.
• CSS Background-image Property: The background-image property is used to set one or more background images to an element.
• CSS Background-repeat Property: The background-repeat property in CSS is used to repeat the background image both horizontally and vertically.
• CSS Background-attachment Property: The background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container.
• CSS Background-position Property: In CSS body-position property is mainly used to set an image at a certain position.
• CSS Background-origin Property: The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage.
• CSS Background-clip Property: The background-clip property in CSS is used to define how to extend the background (color or image) within an element.

Background color Property: This property specifies the background color of an element. A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”. 

Syntax:

body {
   background-color:color name
}

Example: This example shows the use of the background-color property in CSS.

Output: 
 

Background Image Property: This property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. 

Syntax: 

body {
   background-image : link;
}

Example: This example shows the use of the background-image property in CSS.

Output: 

Background repeat Property: By default the background image property repeats the image both horizontally and vertically. 
Syntax: To repeat an image horizontally

body {
   background-image:link;
   background-repeat: repeat:x;
}

Example: This example shows the use of the background-repeat property in CSS.

Output:

Background-attachment Property: This property is used to fix the background ground image. The image will not scroll with the page. 
Syntax: 

body {
   background-attachment: fixed;
}

Example: This example shows the use of the background-attachment property in CSS.

Output: 

Background-position Property: This property is used to set the image to a particular position. 
Syntax : 

body {
   background-repeat:no repeat;
   background-position:left top;
}

Example: This example shows the use of the background-position property in CSS.

Output: