How to Stretch and Scale an Image in the Background with CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS background-size Property
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 understand how this property basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stretch and Scale Background-image with CSS</title>
<style>
.box{
width: 300px;
height: 300px;
background: url("images/avatar.svg") no-repeat;
background-size: cover;
border: 6px solid #333;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>If it doesn't work for you then you can try other values like, background-size: contain;, background-size: 100%;, background-size: 100vw 100vh;, etc.
See the reference on CSS3 background-size property for more details.
Related FAQ
Here are some more FAQ related to this topic:
