Как адаптивно растянуть фон на два блока?

Question

[aendnn]

Есть хедер и промо-блок: По макету фон должен растягиваться на оба блока, в разметке они никак не связаны, промо находится в main, header сам по себе (вставлять одно в другое только ради фона не хочу). Так как background невозможно вынести за пределы контейнера, делаю псевдоэлемент промо-блоку с абсолютным позиционированием, отрицательным отступом сдвигаю на хедер. Всё выглядит как надо, пока не увеличишь контент, при переполнении фон не растягивается (высота 100% задана), а обрезается на высоту отрицательного отступа: Есть какой-то способ растянуть фон на оба блока, и чтобы при переполнении контентом ничего не обрезалось?

Answer 1

[Andrey Suha]

вставлять одно в другое только ради фона не хочу

Как по мне лучше уж это чем то что Вы сделали. Помните что после Вас это ещё может кто то дорабатыват/перерабатывать...

Почему не сделать общий контейнер? Или не сделать этот фон фоном общего врапера страницы, а для остальных секций задавать свой фон?

Comments

[aendnn]

Так и не планировалось оставлять, думала может есть какое-то изящное решение, чтобы без лишних обёрток. Раз нет, сделаю с контейнером, спасибо

Answer 2

[andrash_]

у section задай фон

<section>
			<header>
				меню
			</header>
			<main>
				оффер
			</main>
		</section>

Comments

[Ankhena]

Только section это смысловой блок, для обертки ради обертки лучше использовать обычный div.

[aendnn]

Подойдет только если в последующих блоках есть какие-то фоны, в моем случае их нет

Answer 3

[devaldor]

Перенести промо-блок в header, или применить градиентный фон к body, затем прописать явные фоны к остальным блокам

Comments

[aendnn]

В след. блоках меняется просто цвет фонов, без картинок. Остается наплевать на семантику и перенести промо в хедер :(

Answer 4

[lukoie]

Что мешает у обоих блоков сделать одинаковый градиент, а под картинкой подложить другой градиент, чтоб он просто не залазил на хеддер?

Comments

[aendnn]

Специфика фона, на скрине не видно, но по горизонтали продолжается картинка, из-за неё переход все равно виден. Видимо, обертка - единственное нормальное решение