Адаптивное изображение героя BG с <div> наверху

Я пытаюсь создать отзывчивый, полноразмерный герой img / banner с некоторым текстом наверху.

Поскольку мне нужен div поверх img / banner, содержащий некоторый текст, я решил использовать свойство CSS (а не элемент HTML) для изображения (я стараюсь избегать использования position: absolute если возможно).

После долгих экспериментов я, кажется, нашел отличное решение, чтобы получить background-image свойство вести себя как HTML <img> элемент (именно так я хочу, чтобы img вел себя при изменении размера)...

      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bg-img {
        background-image: url('https://www.bbva.com/wp-content/uploads/2016/12/Carl-Sagan-BBVA-1920x0-c-f.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        padding-top: 40.57%;
        /* (img-height / img-width * width) */
        /* (779 / 1920 * 100) */
}

... однако это `` обходное '' решение, чтобы заставить изображение вести себя, вызывает заполнение для увеличения высоты контейнера bg-image, что заставляет <div> содержащий мой текстовый контент за пределами изображения и далее по странице :(

Есть ли способ решить эту проблему без использования абсолютного позиционирования в текстовом div, чтобы он располагался поверх bg-img?

Я поместил все в ручку, чтобы было легче играть:https://codepen.io/Hacktinium/pen/VwWRBdg

заранее спасибо

Источник

1 ответ

Не уверен, что понял на 100% ваш желаемый результат, если вы хотите, чтобы текст был вверху изображения без использования <img> , почему бы не поместить содержимое и изображение внутри оболочки, но в разные блоки div?

Я создал эту ручку в качестве примера:https://codepen.io/mvuljevas-the-selector/pen/zYzbJgO

Источник
Другие вопросы по тегам