How to Stretch and Scale an Image in the Background with CSS
Answer: Use the CSS
You can use the CSS
background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.
However, part of the image may not be visible (cropped either vertically or horizontally) if the width or height of the resized background image is too large from the element.
Let's try out the following example to see how it basically works:
ExampleTry this code »
<title>Stretch and Scale Background-image with CSS</title>
background: url("images/avatar.svg") no-repeat;
border: 6px solid #333;
If it doesn't work for you then you can try other values like,
background-size: 100vw 100vh;, etc.
See the reference on CSS3 background-size property for more details.
Here are some more FAQ related to this topic: