A PHP Error was encountered

Severity: 8192

Message: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated

Filename: libraries/Filtered_db.php

Line Number: 23

How to Stretch and Scale an Image in the Background with CSS
Q:

How to Stretch and Scale an Image in the Background with CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  238 
Very Easy
0

How to Stretch and Scale an Image in the Background with CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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("/examples/images/avatar.svg") no-repeat;
        background-size: cover;
        border: 6px solid #333;
        margin: 20px;
    } 
</style>
</head>
<body>
    <div class="box"></div>
	<p><strong>Note:</strong> The original size of the image is 100x100 pixels, but we've stretched it with CSS to fit inside a 300x300 pixels DIV box background. Since it is a SVG image you can stretch it to any extent, the image quality will not get affected.</p>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now