Added an image to the page background by reference, but the image is too big. How to make it so that it scales under the browser window and does not stretch, but simply changes its size?

body { background: url('http://i.imgur.com/DhrzPPd.jpg'); }
  • What is the difference between stretching and resizing? What is the difference between scaling and stretching? - Alexey Shimansky
  • So that the picture does not stretch across the browser window, but as if changing the scale, as when holding the Shift key in Word - Fanning
  • one
    It is difficult to understand what it is about, but I think it will help: background: url (' i.imgur.com/DhrzPPd.jpg' ) 50% 50% / cover no-repeat; - MedvedevDev
  • @Fanning still I wonder what is the difference between stretching and scaling? Are these fundamentally orthogonal things? - Alexey Shimansky
  • @ Alexey Shimansky, I think in this context "scaling" - changing the size while maintaining the proportions, "stretching" changing the size without preserving the proportions. - MedvedevDev

1 answer 1

 body { background-image: url(images.jpg);/*Ссылка на вашу картинку*/ background-repeat: no-repeat;/*Запрещаем повторение картинки*/ background-size: cover; /* Масштабируем фон */ }