Адаптивный background html css?
Что делать если при изменении разрешения фона картинка перестаёт уменьшаться пропорционально экрану и оставляет белое пространство? snippet
Дополнительно:
Что делать если при изменении разрешения фона картинка перестаёт уменьшаться пропорционально экрану и оставляет белое пространство?
Начать с указания размера на котором это происходит.
Но скорее всего дело не в фоне. А в том, что из блока что-то вываливается (Текст или блок с фикс шириной)
Ответы:
.container { margin: 0 auto; max-width: 1200px; /* Измените ширину на максимальную ширину, а не фиксированную */ padding: 0 20px; /* Добавьте небольшие отступы по бокам для контента */ box-sizing: border-box; } |
.container { margin: 0 auto; max-width: 1200px; /* Измените ширину на максимальную ширину, а не фиксированную */ padding: 0 20px; /* Добавьте небольшие отступы по бокам для контента */ box-sizing: border-box; }
#home_page .section-header .container:nth-child(2) h1 { font-size: clamp(2rem, 5vw, 9.375rem); /* Замените на ваши значения */ } |
#home_page .section-header .container:nth-child(2) h1 { font-size: clamp(2rem, 5vw, 9.375rem); /* Замените на ваши значения */ }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания адаптивного фона на веб-странице с помощью HTML и CSS, вам следует использовать медиа-запросы и свойство background-size.
1. В HTML добавьте следующий код:
<div class="background"></div>
2. В CSS создайте стили для фона и добавьте медиа-запросы для адаптивности:
.background { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 768px) { .background { background-image: url('background-mobile.jpg'); } }
В этом примере, при ширине экрана менее 768px, будет использоваться другое изображение для фона (background-mobile.jpg). Вы можете настроить медиа-запросы и изображения под свои потребности.
Теперь у вас есть адаптивный фон на вашей веб-странице, который будет корректно отображаться на различных устройствах и разрешениях экрана.