The CSS background is used to set all background style properties. This is one of the CSS3 properties.
- The Background property includes the following properties.
- background-color
- background-image
- background-repeat
- background-position
- background-origin
- background-clip
- background-attachment
- background-size
Syntax:
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;
Values:
| Value | Description |
|---|---|
| background-color | It is used to set the background color. |
| background-image | This property will set one or more image s. |
| background-position | It specifies the position of the background images. |
| background-size | This property sets the size of the background image. |
| background-repeat | With this property, you can specify how to repeat the background images. |
| background-origin | It will specify the positioning area of the background imag e. |
| background-clip | This property specifies the painting area of the background image. |
| background-attachment | Specifies whether the image is fixed or not. |
| initial | It will set this property to its default value. |
| inherit | Inherits this property from its parent element. |
Example of the background property:
This is an example code for the background property.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #A4FDF1;
}
</style>
</head>
<body>
<h2>Background property Example</h2>
<p>Here the background color is set to blue.</p>
</body>
</html>
Result:
By running the above code, you will get the result as shown in the below image.
Example of Background Property with an Image:
In the following code, we use the background property with an image applied to it.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here a background image is used.</p>
</body>
</html>
Result:
By executing the above code, you will get the result as shown in the below screenshot.
Example of Background Property with Different Values:
In the following code, we use different background properties. Check them below.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ccc url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png") no-repeat fixed center;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>In this example background property specifies the background color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in the center.</p>
</body>
</html>
Result:
After executing the above code, you can get the output as shown in the below screenshot.
Example of the background-size property:
The following example uses the background-size property to specify the size of the background.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #eee url("https://sharepointanchor.com/wp-content/uploads/2021/02/Radiant-Gradient.png") no-repeat center 100px;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here the size for the background is set to cover.</p>
</body>
</html>
Result:
By executing the above code, you will see the result as shown in the below image.
Example of background-clip property:
In this code, the background-clip property specifies how far the background should extend within an element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 8px dotted #B9B0FD;
padding: 25px;
background: #B9B0FD;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<div>
<p>The background-clip for this div element is set to padding-box.</p>
</div>
</body>
</html>
Result:
After running the above code, you will get the output as shown in the below image.
Example of background-origin property:
In this example, the background-origin property is used. Here, the background image starts from the upper-left corner.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px double #ccc;
padding: 25px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Radiant-Gradient.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background property example</h2>
<p>Here background-origin: padding-box (default) is set.</p>
<div></div>
</body>
</html>
Result:
Run the above code and get the result as shown in the below image.
Browser-Support:
The post CSS background Property appeared first on Share Point Anchor.
Top comments (0)