Show Output
<!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>
