Categories
CSS Web development

CSS background Property

CSS background Property

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:

CSS Reference

CSS Advanced