Как сделать что бы фон одной секции наезжал на другую секцию?

Question

[aidarDev]

Всем привет, пытаюсь сделать подобное , что бы фон первой секции наезжал на следующую секцию, и что бы оно нормально отображалось на всех разрешениях, но никак не получается, буду очень рад если поможете
html code:

<header class="main-header" style="background-image: url(img/bg.png)">
	<div class="container">
		<div class="row">

			<div class="col-md-5">
				<div class="hero">
					<div class="logo">
						<img src="img/logo.png" alt="alt" class="img-responsive">
					</div>
					<h1 class="hero-title">Функциональная организация пространства</h1>
				</div>
			</div>

		</div>
	</div>
</header>

<section class="about">
</section>

Answer 1

[Lord_Dantes]

Я бы сделал просто первый экран вот цельная картинка с белым. А второй блок без отступов сверху и все.

Или вариант body дать фон и позитион топ.

Comments

[aidarDev]

Сделал первый вариант, на разрешение 1360 всё норм, но начинаю увеличивать до 1920 например, ромбики фона которые должны наезжать на след секцию исчезают

[Lord_Dantes]

aidarDev, background-size: contain;

[Lord_Dantes]

aidarDev, и дальше тексту нужно будет давать вообщем text-shadow: 0px 0px 2px #fff;
или же к дизайнеру как сделать адаптив в вашем случае

[aidarDev]

slave, при background-size: contain ромбики появились, но фон не растягивается на 100%, хотелось бы что бы фон растягивался на 100% как при background-size: cover и были ромбики как у background-size: contain
как выглядит с bgs: contain

[Lord_Dantes]

aidarDev, backgrund-size: 100% auto; возможно

[aidarDev]

slave, неа, вообщем сделал height: 100vh и всё нормально на всех разрешениях)

Answer 2

[Amigun]

z-index и margin

Comments

[Amigun]

Или просто margin с отрицательным значением