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.
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.org/wp-content/cdn-uploads/20190417124305/250.png")
no-repeat center fixed;
}
</style>
</head>
<body></body>
</html>
Output:
Contact Us