Background Properties
The background property is a shorthand property for: background-color, background-image, background-position, background-size and background-repeat.
background-color
The background-color property defines the background color of an element.
Eg:
<style>
h3
{
background-color:#9FC;
}
</style>
<h3>Background Properties</h3>
background-image
The background-image property applies a graphical image (png, jpeg, webp,gif,svg) to the background of an element.
Eg:
<style>
body
{
background-image: url(images/prairie.png);
}
</style>
background-position
The background image will be positioned inside the element according to the background-position specified. It may be bottom. center, left, right or top.
Eg:
<style>
body
{
background-image: url('prairie.png');
background-position: center;
}
</style>
background-size
The background-size property is used to set the size of a background image of an element so that the background image can be fit in the available space. It’s values can be auto, contain or cover.
Eg:
<style>
body
{
background-image: url('prairie.png');
background-position: center;
background-size:cover;
}
</style>
<p>Font Properties</p>
background-repeat
The background-repeat property is used to repeat the background image both horizontally and vertically. We can also specify whether the background-image should be repeated or not. Background-repeat can take the values: no-repeat, repeat, repeat-x, repeat-y, round.
Eg:
<style>
body
{
background-image: url('prairie.png');
background-repeat: repeat-x;
}
</style>
<p>Font Properties</p>