Как центрировать фон и добавить скроллинг?

  • 20 августа 2023 г. 14:56
Ответы на вопрос 2
Чтобы добавить скроллинг и центрировать фоновую картинку, необходимо внести некоторые изменения в код.

Во-первых, нужно установить значение `background-size` равным `auto`, чтобы фоновая картинка не масштабировалась под размер окна браузера, а оставала своего естественного размера:

```css
body {
    background-image: url("image1.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: scroll; 
}
```

Затем можно добавить `max-width` к `body`, чтобы ограничить ширину контейнера со скроллингом, чтобы скроллинг по горизонтали стал доступен:

```css
body {
    background-image: url("image1.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: scroll; 
    max-width: 100%;
}
```

Теперь картинка будет полностью отображаться и пользователь сможет использовать полосы прокрутки для просмотра целиком.
Совет: избегайте использования сколлбара в списках, так как это обычно не нравится пользователям. Чтобы решить эту проблему, можно явно указать минимальные значения ширины и высоты в пикселях.
Похожие вопросы