Background Size Property
The Background Size property helps us set the size of the background (directly down to the number of pixels!)
Description
The Background Size property helps us set how long and wide we want the background image to be on the webpage. We can set the length or width as needed or the system can automatically figure out the height of an image if details for the width are specified.
- Auto - Background image is shown in it's original dimensions
- Length - If two values are specified, the first one is considered to be the width, while the second one is the length. If only the first one is specified, the length is automatically calculated based on the first value. The dimensions can be specified in px, pt or em, etc.
- Percent - If two values are specified, the first one is considered to be the width, while the second one is the length. If only the first one is specified, the length is automatically calculated based on the first value. The dimensions are specified in %.
- Cover - The background image is edited such that it fits the container the background image is in. To fit the container, however, the image could be stretched out or distorted in some fashion.
Syntax :
element {
background-image: url('location_to_img');
backround-size: 50px 70px;
}
p {
background-image: url("www.pixel.com/cool-images/coolest.jpg");
background-repeat: auto;
}