Look at these two examples. How can we ensure that the image remains the same as it is without changes when it is zoomed in? And it doesn't look like a cover, because a little lower and the items and menus and content, the image is not fully on the entire site. Already a lot of googled, but I can’t get a hold of it. The first site , the second site .

  • Both sites use background-size: cover . Give your code so that you can consider your problem. - stackanon
  • background-size: cover stretches the image to full page. And you need to stretch it only within the same area, because below all the contents of the site. - Artyom Oleynichenko
  • This is the basics of layout - yours on htmlbook.ru, would learn from you - user33274

1 answer 1

To implement such a functional, relative units of measure vh and the background-size property with the value of cover .

vh - 1% of the height of the viewing area

cover - Scales an image while preserving proportions so that its width or height is equal to the width or height of the block.

Here is an example using these two properties:

 body { margin: 0; } .background { height: 100vh; background: url('https://satyr.io/1920x1080/3') 50% 50%/cover no-repeat #eee; } 
 <div class="background"></div> <h1>Заголовок</h1> <p>Какое-то важное содержимое страницы</p>