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:
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.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
h1 {
background-color: blue;
}
</ style >
</ head >
< body >
< h1 >Geeksforgeeks</ h1 >
</ body >
</ html >
|
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.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
background-image:
}
</ style >
</ head >
< body >
< h1 >Geeksforgeeks</ h1 >
</ body >
</ html >
|
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.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
background-image:
background-repeat: repeat-x;
}
</ style >
</ head >
< body >
< h1 >"Hello world"</ h1 >
</ body >
</ html >
|
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.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
background-image:
background-attachment: fixed;
}
</ style >
</ head >
< body >
< h1 >Geeksforgeeks</ h1 >
</ body >
</ html >
|
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.
html
<!DOCTYPE html>
< html >
< head >
< style >
body {
background-image:
background-repeat: no-repeat;
background-position: center;
}
</ style >
</ head >
< body >
< h1 >Geeksforgeeks</ h1 >
</ body >
</ html >
|
Output:
