Stretch Background Image

To Fit the Background Image on the Web Page

When we place an image in the background of our web pages, their appearance will be different depending on the resolution of the visitors. Because the picture we use will be tiled with different numbers of repetitions on screens of different sizes.

Regardless of the resolution of the visitor's computer, if we want to stretch background image to fill the screen, we can use the background-size property that comes with CSS3 .

Using Background-size property, we can change the length of our background image in px, percentage, etc. We can specify in, or we can use cover and contain values.

Cover and contain values ​​ensure that the image covers the area it is applied to. The difference between them;

• Cover value ensures that it covers both horizontally and vertically without leaving any empty space.
• Contain value, on the other hand, ensures that it covers horizontally or vertically without overflowing. In this case, there may be a gap in either direction. 
• Check out the topic examples section.

For older versions of browsers, it is necessary to use the -webkit-, -moz- and -o- prefixes.

In the example below, the size of the background image is specified in pixels.

EXERCISES