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:
