How To Stretch And Scale An Image In The Background With CSS

Trang chủ » Html Background Image Stretch Horizontally » How To Stretch And Scale An Image In The Background With CSS

Có thể bạn quan tâm

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:

  • How to position text over an image using CSS
  • How to apply multiple background images to an element using CSS
  • How to transform image size on mouse hover without affecting the layout in CSS
Previous Page Next Page

Từ khóa » Html Background Image Stretch Horizontally