The CSS background property is a shorthand property for:
background-color property
background-image property
background-position property
background-size property
background-repeat property
background-origin property
background-clip property
background-attachment property
Syntax:
background: background-color background-image position/background-size background-repeat background-origin background-clip background-attachment;background-color – defines the background color to be used.
background-image – defines one or more background images to be used.
background-position – defines the position of the background images.
background-size – defines the size of the background images.
background-repeat – defines how to repeat the background images.
background-origin – defines the positioning area of the background images.
background-clip – defines the painting area of the background images.
background-attachment – defines whether the background images are fixed or scrolls with the rest of the page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #fec5bb url("https://lenadesignorg.files.wordpress.com/2020/02/heart.png?w=640") no-repeat fixed center;
height: 200vh;
}
</style>
</head>
<body>
<h1 style="text-align:center;">The background Property</h1>
<h3 style="text-align:center;">Scroll down to see the effect</h3>
</body>
</html>Output:
Enjoy coding!
Read also: