CSS Background
Last Updated :
10 Apr, 2024
CSS background sets the background of elements. It is used to define the background effects for elements in single line. There are lots of properties to design the background.Â
Syntax:
css selector{
background: bgColor bgImageUrl bgPosition bgRepeat bgAttachment;
}
/*
.root{
background: white url("gfg_logo.png") center no-repeat fixed;
}
*/
Example: This example display the use of CSS background.
Javascript
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: lightblue
no-repeat center fixed;
}
</style>
</head>
<body></body>
</html>
|
Output:
CSS Background example
CSS Background Property
The CSS Background is a shorthand property for the following
Below are the detailed explaination for these properties with examples.
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:Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...