Languages
[Edit]
EN

CSS - stretch background image to element size

0 points
Created by:
Giles-Whittaker
739

In this article, we would like to show you how to stretch background image to element size with CSS.

 

PreviewStyle

background-size: 100% 100%

Note:

The image is stretched to the entire surface of the element, losing the ratio.

background-size: cover

Note:

The image is stretched to the entire surface of the element keeping the ratio.

background-size: contain

Note:

The image is stretched to the entire surface of the element keeping the ratio (by default the image is repeated).

  • background-size: contain;
  • background-repeat: no-repeat;

Practical example

Edit

In this example, we present different ways to stretch background image to element size, depending on the effect you want to achieve.

References

Edit
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join