CSS Background
The CSS background property is a shorthand for setting multiple background properties in one declaration, including background color, image, position, size, repeat, origin, clip, and attachment. This property is essential for customizing the visual appearance of elements.
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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: lightblue url(
"https://media.w3wiki.net/wp-content/cdn-uploads/20190417124305/250.png")
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
Background Property | Description |
|---|---|
The background-color property in CSS is used to specify the background color of an element. | |
The background-image property is used to set one or more background images to an element. | |
The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. | |
The background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container. | |
In CSS body-position property is mainly used to set an image at a certain position. | |
The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage. | |
The background-clip property in CSS is used to define how to extend the background (color or image) within an element. |
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.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: blue;
}
</style>
</head>
<body>
<h1>w3wiki</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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://media.w3wiki.net/wp-content/cdn-uploads/20190417124305/250.png");
}
</style>
</head>
<body>
<h1>w3wiki</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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url(
"https://media.w3wiki.net/wp-content/cdn-uploads/20190417124305/250.png");
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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url(
"https://media.w3wiki.net/wp-content/cdn-uploads/20190417124305/250.png");
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>w3wiki</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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url(
"https://media.w3wiki.net/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
Contact Us