Size or resize a background image.
Syntax
background-size: Width [height] | cover | contain ;
This can be set to either a fixed value or set automatically, with a choice of either covering the background area or containing the entire image.
Width [height] - Set a fixed size for the background image. The keyword auto can be used to scale the background image in the corresponding direction such that its intrinsic proportion is maintained.
Values can be set in px, pt, em or % (percentage of the parent element).
If only one value is given, the height is set to the default auto.
cover - Scale the background image to completely cover the background area even if some parts of the image are pushed out of view.contain - Scale the background image so that its full width and height are contained within the content area, this will not fill the background area unless the proportions match.
New in CSS3 is the ability to specify multiple background images. You can (optionally) specify the background-size for multiple images as a comma-separated list, these will then be applied (in order) to each of the images specified by background-image.
Examples:
h1 { background-size: 300px 150px; }
.emw3class { background-size: 100% 100%; }
#emw3id { background-size: contain; }
Try it:
This is a sample of text with a CSS background image. To avoid distortion the background size must match the actual dimensions of the image. |
(CSS 3) Browser Support: IE9+, Firefox 4+, Opera, and Safari 5+.
“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart
Related:
Background-size - MDN Web Docs.
Background-Image - The background image for an element.