Не получается сделать адаптивные фон картинкой и поверх адаптивные блоки через inline-block и %
Картинка через background не встала та же проблема - только если ставишь ей ширину и высоту в PX то всё норм, а 100% ставишь ширину и высоту нет ничего. Пришлось картинку вписать через <img, а текст поверх через position: absolute;
Я понимаю, если родительскому div ставишь 1980рх то все работает… но, что под каждое разрешение делать картинку и прописывать её в css что ли?
Просто мне поверх фона нужно ещё накинуть резиновые Div блоки.
Та же проблема в % не работает в PX работает но не адаптивно.
.kubiki {
display: inline-block;
width: 100%; — так не работает только px
height: 100%
}
.kub1 {
display: inline-block;
width: 24%;
height: 24%
--
Вот как мне нужно рис1. Но что бы адаптивно всё было.
ПрограммированиеВеб-разработка+2
Если вы хотите создать адаптивный фон с изображением и адаптивные блоки поверх него, можно использовать следующий подход:
- Для родительского элемента, содержащего фоновое изображение, установите
position: relative;Это позволит нам позиционировать абсолютно спозиционированные блоки относительно этого элемента.
2. Для фонового изображения можно использовать свойство
background-size: cover; чтобы оно занимало всю доступную площадь родительского элемента и сохраняло свои пропорции.
3. Для абсолютно спозиционированных блоков, которые должны быть поверх фонового изображения, вы можете использовать
position: absolute; и задать им соответствующие значения
toprightbottom и
leftчтобы определить их местоположение на фоне. Можно использовать проценты для определения размеров и позиций блоков, чтобы они были адаптивными.
4. Чтобы обеспечить адаптивность, вместо фиксированных значений в пикселях вы можете использовать относительные единицы измерения, такие как проценты, vw (viewport width) и vh (viewport height), чтобы блоки и фоновое изображение масштабировались в зависимости от размеров экрана.
Пример html кода:
<div class="parent">
<div class="overlay-block">Блок 1</div>
<div class="overlay-block">Блок 2</div>
<div class="overlay-block">Блок 3</div>
</div>
css:
.parent {
position: relative;
background-image: url('фоновое_изображение.jpg');
background-size: cover;
}
.overlay-block {
position: absolute;
width: 24%;
height: 24%;
/* Здесь можно задать top, right, bottom и left для позиционирования блоков */
}
Обратите внимание, что вам может потребоваться дополнительно настроить стили, такие как цвет текста и фоновые цвета блоков, чтобы они были видимы и контрастны на фоновом изображении.