Блог

У меня есть фоновое изображение, которое превышает высоту браузера. Как я могу включить изображение, чтобы я мог прокрутить вниз, чтобы увидеть оставшуюся часть, сохраняя масштаб при разных размерах браузера? Код, который я написал или использовал, только обрезает изображение в соответствии с размером браузера. Переполнение, похоже, не влияет.

В зависимости от конечного результата, который вы ищете, вот некоторые подходы и инструменты, которые вы могли бы рассмотреть.

• из-за различных соотношений сторон настольных и мобильных экранов иногда бывает трудно создать одно фоновое изображение, которое будет хорошо работать для всех. Но если вы подготовите фоновое изображение рабочего стола, скажем, шириной 1920 пикселей на 1080 пикселей, и мобильное фоновое изображение, скажем, шириной 640 пикселей на 960 пикселей, вы можете использовать медиа-запросы для указания разных фонов для разных видовых экранов.
  дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images

 @media(max-width:480px){ 
    body{
       background-image:URL(mobile-background.jpg);
    }
 }

@media(min-width:481px){ 
    body{
       background-image:URL(desktop-background.jpg);
    }
} 

• размер фонового изображения обложки или содержимого также очень полезен. Указание содержать означает, что фоновое изображение будет масштабироваться в соответствии с размером элемента, к которому оно применяется.

А указание обложки означает, что она заполнит фон элемента, к которому она применяется, и вы должны ожидать некоторого изменения фонового изображения. Вы также можете расположить изображение.
дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

 div{  
   background-size: contain;  
   /* or */
   background-size: cover;
   background-position: center;
} 

• и иногда вы можете захотеть остановить прокрутку фона:
  дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

 div{
   background-attachment: fixed;
}