WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties