1

Имеются два div-а с контентом. На фоне них необходимо расположить (png во вложении). Нижняя часть на нижнем div, а верхняя, соответственно на верхнем div.

1 ответ 1

1

Чтобы картинку правильно расположить (состыковать), ее необходимо разделить на две части, для каждой секции отдельно.

С помощью правила @media screen установим, в каких случаях будем показывать изображение.

Вот пример. Открывайте окно на всю страницу и увеличивайте/уменьшайте его размер.

* {
  margin: 0;
  padding: 0;
}

.section3 {
  position: relative;
  background-color: lightgray;
}

.section4 {
  position: relative;
}

.sectioncontent3 {
  position: relative;
}

@media screen and (min-width: 800px) {
  .section3:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://i.stack.imgur.com/IVpMQ.png') bottom right no-repeat;
    background-size: 100%;
    z-index: 0;
  }
  .section4:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://i.stack.imgur.com/awaX6.png') top right no-repeat;
    background-size: 100%;
    z-index: 0;
  }
}

.sectionleft3 {
  display: flex;
  flex-direction: column;
  align-items: start;
  box-sizing: border-box;
  padding: 50px 100px 50px 0px;
  margin: 0 0 0 0;
}

.sectionleft3 img {
  user-select: none;
}

.sectiontextleft3 {
  font-family: CeraPro;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 30px;
  margin: 30px 0 0 0;
}

.contain {
  max-width: 1350px;
  margin: auto;
}

.bg__right {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 60%;
  background-image: url("https://cs8.pikabu.ru/post_img/big/2017/06/06/2/1496710261194222281.jpg7");
  background-size: cover;
  z-index: -1;
}

.section4 {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.sectioncontent4 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 1350px;
  max-width: 1350px;
  margin: 70px 0 90px 0;
}

.headingtext4 {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
  font-family: CeraPro;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 60px;
  color: #E63D63;
}

.dropdownblocks4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 40px;
  width: 100%;
  max-width: 100%;
  margin: 70px 0 0 0;
}

.block4 {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.textblock4 {
  display: flex;
  align-items: center;
  font-family: CeraPro;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 30px;
  color: #6C0C52;
  cursor: pointer;
  user-select: none;
  margin: 10px 0 0 0;
}

.iconpolygon4 {
  margin: 5px 0 0 15px;
  transition: all 0.1s linear;
  transform: rotate(90deg);
}

.iconpolygon4.transform {
  transform: rotate(0deg);
}

.dropdowntext4 {
  display: block;
  font-family: CeraPro;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  margin: 10px 0 0 18px;
}
<div class="main">

  <div id="1" class="section3">
    <div class="sectioncontent3">
      <div class="bg__left">
      </div>
      <div class="bg__right">
      </div>
      <div class="contain">
        <div class="sectionleft3">
          <img src="img/logo2.png">
          <span class="sectiontextleft3">
                        Наша компания занимается маркетинговыми исследованиями B2B рынков, специализируясь на
                        промышленных отраслях.
                    </span>
          <span class="sectiontextleft3">
                        Исследования помогают принимать правильные управленческие решения,
                        выбрать бизнес-стратегию, рыночную нишу, проверенного поставщика, определить эффективные
                        способы ведения конкурентной борьбы и точки для роста компании.
                    </span>
        </div>
      </div>
    </div>
  </div>



  <div id="2" class="section4">
    <div class="sectioncontent4">
      <span class="headingtext4">
                    Основные направления исследований
                </span>
      <div class="dropdownblocks4">
        <div class="block4">
          <img src="img/icons/0011.png">

          <span class="textblock4">
                            Исследование рынка
                            <img class="iconpolygon4" src="img/polygon.png">
                        </span>
          <ul class="dropdowntext4">
            <li>объем в денежном и натуральном выражении</li>
            <li>оценка структуры и объёма рынка</li>
            <li>подбор выгодного поставщика</li>
            <li>структура по сегментам</li>
            <li>отраслевые и региональные особенности</li>
            <li>уровень конкуренции</li>
            <li>динамика развития и тенденции</li>
            <li>факторы влияющие на конъюнктуру рынка</li>
            <li>риски и возможности для роста</li>
          </ul>
        </div>
        <div class="block4">
          <img src="img/icons/0013.png">
          <span class="textblock4">
                            Анализ конкурентов
                            <img class="iconpolygon4" src="img/polygon.png">
                        </span>
          <ul class="dropdowntext4">
            <li>выявление главных конкурентов и их доли</li>
            <li>обзор и сравнительный анализ компаний</li>
            <li>маркетинговые стратегии</li>
            <li>ценовая и сбытовая политика</li>
            <li>потенциальные цели</li>
            <li>выявление сильных и слабых сторон (SWOT-анализ)</li>
          </ul>
        </div>
        <div class="block4">
          <img src="img/icons/0041.png">
          <span class="textblock4">
                            Изучение потребителей
                            <img class="iconpolygon4" src="img/polygon.png">
                        </span>
          <ul class="dropdowntext4">
            <li>анализ спроса</li>
            <li>анализ клиентов и потребительского поведения</li>
            <li>сегментирование потребителей</li>
            <li>факторы влияющие на лояльность к поставщикам</li>
            <li>построение моделей потребительского поведения</li>
            <li>ценовые ожидания</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • Красиво, вот только на скриншоте та часть картинки, что в верхнем блоке - не была фоном, а наоборот была сверху. Не знаю, имеет ли это значение для автора вопроса.
    – Quazimorda
    13 мар 2020 в 10:32
  • @Sevastopol', значит был неправ, наложились картинки, подумал, что так и задумано.
    – Quazimorda
    13 мар 2020 в 12:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.