Как сделать скроллинг фона, при этом делая позиционирование по центру?
Мне нужно добавить фоновую картинку "image1.png". Картинка 1920 на 1080. Должна быть на весь экран и позиционирование идти по центру. Нужно сделать так, чтобы если у пользователя картинка обрезается в силу разного разрешения экрана, он мог, используя полосы скролинга по горизонтали и вертикали, посмотреть картинку полностью.
Как это можно реализовать? Набросал такой код, но все равно картинка частична обрезается и при скролинге не получается рассмотреть картинку полностью. (работает только по вертикали, а нужно и по горизонтали и по вертикали)
<!DOCTYPE html> <html> <head> <title>Background Image</title> <style> body { background-image: url("image1.png"); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; overflow: scroll; } </style> </head> <body> </body> </html> |
<!DOCTYPE html> <html> <head> <title>Background Image</title> <style> body { background-image: url("image1.png"); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; overflow: scroll; } </style> </head> <body> </body> </html>
Дополнительно:
Делаем блок какой вам нужен. Задаем ему overflow auto
Засовываем в него другой блок (в идеале псевдо от первого) с размерами 1920х1080. Ну или минимальными размерами. Ему задаем фоновую картинку.
Но звучат все эти скроллы довольно дико.
Вам нужно чтобы скролл создался контентом. Этим контентом может быть блок строго заданных размеров. Выше вариант как раз про это.
Ответы:
Скорее всего нужно что-то другое, никто не любит сколл.
А решение очевидно: указать явно min-width и min-height в пикселях.
- Понимаю, хотел сначала реализовать автоскролл зависимости от направления курсора, но ничего толкового не вышло.
Указал min-width и min-heigh, но при открытии страницы на мобильном картинка все равно обрезается и появляются белые полосы.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания скроллинга фона с позиционированием по центру можно использовать следующий подход:
1. Создайте контейнер, в котором будет находиться ваш фоновый изображение. Этот контейнер должен иметь фиксированную высоту и ширину, а также быть позиционирован относительно.
2. Добавьте в этот контейнер изображение, которое будет служить фоном. Установите его размер как cover, чтобы оно занимало всю доступную площадь контейнера.
3. Для создания эффекта скроллинга фона добавьте дополнительный контейнер внутри основного контейнера. Этот контейнер будет иметь высоту больше, чем основной контейнер, чтобы создать эффект скроллинга.
4. Установите свойство overflow на основном контейнере в значение hidden, чтобы скрыть часть внутреннего контейнера, который будет скроллироваться.
5. Используйте CSS свойство transform для позиционирования внутреннего контейнера по центру основного контейнера. Для этого установите значение translateX(-50%) и translateY(-50%).
6. Теперь внутренний контейнер будет выровнен по центру основного контейнера, а при скроллинге будет создаваться эффект движения фона.
Пример реализации на языке PHP:
<div class="background-container"> <div class="scrolling-container"> <!-- Your content here --> </div> </div>
Стили CSS для реализации скроллинга фона и позиционирования по центру:
.background-container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .scrolling-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200vh; /* Установите высоту больше, чем основной контейнер */ }
Этот подход позволит вам создать скроллинг фона с позиционированием по центру на вашем веб-сайте. Не забудьте настроить размеры и стили в соответствии с вашим дизайном.