возник вопрос как сверстать этот макет, потому что фотография по середине расположена одновременно и в header, и в section.
-
Ну расположена, окей, а проблема-то в чём, что не получается?– andreymal8 дек 2018 в 13:51
-
не особо понимаю как ее сверстать, чтобы именно пол фотки было в section, а другая в header– Василий Пеликан8 дек 2018 в 13:55
-
Есть тег img, есть background-image в css, если же это динамический график, можно продублировать svg-теги там и тут. Всё ещё не понимаю, с чем у вас трудности возникли– andreymal8 дек 2018 в 13:56
-
так если у меня тег будет в header, то тогда фотка будет полностью расположена на синем фоне, а если в section, то, наоборот, на белом. а я не понимаю, как сделать, чтобы 1 фотка была и там, и там, потому что если продублировать, то будут просто 2 одинаковые фотки на 2 фонах– Василий Пеликан8 дек 2018 в 14:04
-
У вас проблема в том, что header и section пересекаются? Просто наложите section поверх header с помощью отрицательного margin-top или position:relative например– andreymal8 дек 2018 в 14:05
1 ответ
Если вопрос про картинку на фоне, то можно сделать наложение, например, с помощью отрицательного margin-top
В примере ниже margin: -180px auto 8px;
— первый -180px
задаёт отрицательную границу сверху и тем самым создаёт наложение на предыдущий блок, auto
задаёт автоматические границы слева и справа и тем самым выравнивает по центру страницы, 8px
граница снизу для красоты, чтобы тень не обрезалась
html, body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header-main {
height: 360px;
background-image: url(https://i.stack.imgur.com/HiWEK.jpg);
background-size: cover;
background-position: center center;
color: white;
}
.header-main > h1 {
text-align: center;
margin: 0;
padding: 60px 0;
}
.section-1 {
/* Вся суть здесь */
width: 400px;
margin: -180px auto 8px;
height: 400px;
box-shadow: 0 0 4px black;
background-color: #f2f2f2;
}
<header class="header-main">
<h1>Добро пожаловать</h1>
</header>
<section class="section-1">
Привет, мир<br/>
<img src="https://i.stack.imgur.com/oqrem.jpg" alt="" />
</section>