CSS Multiple Backgrounds
CSS gives you the ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.
The below example uses the background shorthand property.
CSS Background Size Property
The background-size property can be used to define the size of the background images.
The background image size can be specified using the percentage or pixel values as well as the keywords auto, contain, and cover. Negative values are not allowed.
The following example shows how the background-size values cover and contain works.
Full Size Background Image
CSS background-clip Property
The background-clip property in CSS is used to define how to extend background (color or image) within an element.
The background-clip property includes three values: border-box, padding-box, content-box.
CSS background-origin Property
The background-origin is a property that helps in adjusting the background image of the webpage. This property is used to set the origin of the image in the background. By default, this property sets the background image origin to the upper-left corner of the screen/webpage.
It can take the same values as background-clip property: border-box, padding-box, content-box.