The CSS background properties are used to define the background effects for HTML elements on a web page.
There are several properties to design the background, including:
You can set the background color of an element using the background-color property. This is a simple way to define the background color of the entire page or specific elements.
You can use the background-image property to set an image as the background of an element. This is often used for creating visually appealing backgrounds for headers, sections, or the entire page.
#header {
background-image: url('https://static.additionalsheet.com/images/bootstrap/bootstrap_intro.png');
background-size: cover; /* Scale the image to cover the element */
}
By default, background images repeat both horizontally and vertically. You can control this behavior using the background-repeat property.
#header {
background-image: url('https://static.additionalsheet.com/images/bootstrap/bootstrap_intro.png');
background-repeat: no-repeat; /* Prevent image from repeating */
}
Use the background-position property to control where the background image is positioned within its container.
#header {
background-image: url(https://static.additionalsheet.com/images//others/alisa.jpg);
background-repeat: no-repeat;
/* Prevent image from repeating */
background-position: center left;
}