БЛОГ НА HUSL


background на фоне двух div

Автор вопроса: rabbit

Ситуация такая. Есть определенная структура html шапки сайта. Все три глобальных div (шапка - мидл контент - футер) обёрнуты в main. В шапке имеются пункты меню, по клику на которые (загрузка контента с помощью ajax) шапка должна уменьшаться и меняться фото background'а. И не просто меняться.. Оно должно задевать и шапку и немного мидл контент. Уменьшить шапку, задав ей стили я могу сам сделать, средствами js, но вот разобраться с хитрым background'ом не могу.

* {
    margin: 0;
    padding: 0;
  }
  html, body {
    width: 100%;
    height: 100%;
  }

  .header {
    display: flex;
    justify-content: center;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
    url("");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width:100%;
    max-width: 100%; 
    height: 700px;
    max-height: 700px; 
  }

  .header_content {
    display: flex;
    flex-direction: column;
    width: 1140px;
    max-width: 1140px;
    height: auto;
    user-select: none;
  }

  .header_content_head {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0 0;
  }

  .header_logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
  }

  .header_logo_text {
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 126.22%; 
    color: #00A3FF; 
    padding: 0 0 0 15px;
  }

  #header_menu_adaptive {
    display: none;
  }

  .header_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 700px;
  }

  .header_menu_dropdown_menu {
    display: none;
    position: absolute;
    height: 200px;
    background-color: #00A3FF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 20px 20px 20px 20px;
  }

  .header_menu_dropdown_menu_text {
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    color: #FFFFFF;
    text-decoration: none;
  }

  .header_menu li:hover .header_menu_dropdown_menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .header_menu li {
    list-style-type: none;
  }

  .header_menu_text:hover {
    border-bottom: 4px solid #00A3FF;
  }

  .header_menu_text:active {
    color: #00A3FF;
  }

  .header_menu_text {
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    text-decoration: none;
  }

  .header_content_center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto 0 0 0;
  }

  .header_content_center_text1 {
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 40px;
    color: #FFFFFF;
  }

  .header_content_center_text2 {
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
    margin: 40px 0 0 0;
  }

  .header_content_down {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 40px 0 auto 0;
  }

  .header_content_down_text {
    font-family: RobotoSlab;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    color: #FFFFFF;  
    background: #00A3FF;
    border-radius: 30px;
    padding: 15px 30px 15px 30px;
  }

  .middle_content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
  
  .footer {
  display: flex;
  justify-content: center;
  background: #009DE0;
  width:100%;
  max-width: 100%; 
  height: 100%;
  max-height: 100%; 
}

.footer_content {
  display: flex;
  justify-content: space-between;
  width: 1140px;
  max-width: 1140px;
  height: auto;
  padding: 30px 0 30px 0;
  user-select: none;
}

.footer_logo {
  display: flex;
  align-items: center;
  align-self: flex-start;
}

.footer_logo_text {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  padding: 0 0 0 10px;
}

.footer_menu {
  display: contents;
}

.footer_menu_block {
  display: flex;
  flex-direction: column;
}

.footer_menu li {
  list-style-type: none;
  padding: 0 0 20px 0;
}

.footer_menu_block_text {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  text-decoration: none;
}

.footer_menu_block_text:hover {
  text-decoration-line: underline;
}

.footer_menu_block_text:active {
  color: #000000;
  text-decoration: none;
}

.footer_content_developer {
  display: flex;
  align-items: center;
  align-self: flex-end;
  cursor: pointer;
}

.footer_content_developer_text {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8">

    <title></title>

</head>

<body>
    <div class="main">
        <div class="header">
            <div class="header_content">
                <div class="header_content_head">
                    <div class="header_logo">
                        <img src="img/icons/logo-top.png" alt="">
                        <span class="header_logo_text">
                           111
                        </span>
                    </div>
                    <input id="header_menu_adaptive" type="checkbox" />
                    <label class="header_menu_adaptive_button" for="header_menu_adaptive">
                        <span></span>
                    </label>
                    <ul class="header_menu">
                        <li><a class="header_menu_text" href="">Главная</a></li>
                        <li><a class="header_menu_text" href="">О компании</a></li>
                        <li><a class="header_menu_text" href="">Услуги</a>
                            <ul class="header_menu_dropdown_menu">
                                <li><a class="header_menu_dropdown_menu_text" href="">Бухгалтерские</a></li>
                                <li><a class="header_menu_dropdown_menu_text" href="">Юридические</a></li>
                                <li><a class="header_menu_dropdown_menu_text" href="">Аудиторские</a></li>
                                <li><a class="header_menu_dropdown_menu_text" href="">Регистрационные</a></li>
                                <li><a class="header_menu_dropdown_menu_text" href="">Кадровое<br>
                                        делопроизводство</a></li>
                            </ul>
                        </li>
                        <li><a class="header_menu_text" href="">Прайс-лист</a></li>
                        <li><a class="header_menu_text" href="">Контакты</a></li>
                    </ul>
                </div>

                <div class="header_content_center">
                    <span class="header_content_center_text1">
                        Профессиональные бухгалтерские,<br>
                        аудиторские и юридические услуги
                    </span>
                    <span class="header_content_center_text2">
                        Лучше уверенность в хорошем результате, чем надежда на замечательный результат!
                    </span>
                </div>

                <div class="header_content_down">
                    <span class="header_content_down_text">
                        т. 11 11111111111
                    </span>
                </div>

            </div>
        </div>


<div class="middle_content">
</div>
        
<div class="footer">
            <div class="footer_content">
                <div class="footer_logo">
                    <img src="img/icons/logo-footer.png" alt="">
                    <span class="footer_logo_text">
                        111
                    </span>
                </div>
                <div class="footer_menu">
                    <ul class="footer_menu_block">
                        <li><a class="footer_menu_block_text" href="">О компании</a></li>
                        <li><a class="footer_menu_block_text" href="">Прайс-лист</a></li>
                        <li><a class="footer_menu_block_text" href="">Контакты</a></li>
                    </ul>
                    <ul class="footer_menu_block">
                        <li><a class="footer_menu_block_text" href="">Бухгалтерские услуги</a></li>
                        <li><a class="footer_menu_block_text" href="">Юридические услуги</a></li>
                        <li><a class="footer_menu_block_text" href="">Аудиторские услуги</a></li>
                    </ul>
                    <ul class="footer_menu_block">
                        <li><a class="footer_menu_block_text" href="">Регистрационные услуги</a></li>
                        <li><a class="footer_menu_block_text" href="">Кадровое делопроизводство</a></li>
                    </ul>
                </div>

                <div class="footer_content_developer">
                    <img src="img/icons/gs-logo.png" alt="">
                    <a class="footer_content_developer_text" href="https://galaxy-site.ru/">
                        111
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

`. Структуру, как нужно я приложу. Спасибо.[![введите сюда описание изображения][1]][1]


Источник

Ответы (1 шт):

Автор решения: Sevastopol'

@rabbit, если конечно я правильно понял поставленную вами задачу, то вот решение. Это один из вариантов, считаю, что самый оптимальный. Думаю, вам не сложно будет понять его логику.

Смотреть лучше в развернутом виде, так интереснее. Кликаем на ссылки вверху справа 

document.querySelector('.nav>ul').onclick = function() {
  document.querySelector('.header').classList.add('header__height');
  setTimeout(function() {
    document.querySelector('.header').classList.add('header__fixed');
    document.querySelector('.header__sub').classList.add('header__sub__active');
    document.querySelector('.content').classList.add('content__active');
  }, 1800);
}
* {
  margin: 0;
  padding: 0;
}

.header__sub {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50vh;
  background: url(https://liveitaly.ru/sites/default/files/nalog-na-prozhivanie.jpg) center bottom no-repeat;
  background-size: cover;
}

.header__sub:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
}

.header__sub__active {
  position: fixed;
}

.main {
  position: relative;
}

.header {
  position: relative;
  width: 100%;
  height: 70vh;
  background: url(https://jokeruni.com/wp-content/uploads/2017/07/toplanti-yonetimi-uzmanligi-egitimi-scaled.jpg) center bottom no-repeat;
  background-size: cover;
  transition: all 1.5s ease;
}

.header:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.header__height {
  height: 60px;
}

.header__fixed {
  background: none;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.nav {
  position: absolute;
  top: 0;
  right: 0;
}

ul,
li {
  list-style: none;
  color: white;
  display: inline-block;
  float: left;
  margin: 10px;
}

.nav a {
  color: white;
  text-decoration: none;
}

.content {
  position: relative;
  width: 100%;
  height: 200vh;
}

.content__active {
  margin-top: 60px;
}

h1 {
  padding: 20px;
  text-align: center;
}

p {
  padding: 0 20px;
  line-height: 1.5;
  text-align: justify;
}

.footer {
  width: 100%;
  height: 60px;
  background-color: #555;
}
<div class="header__sub"></div>
<div class="main">
  <div class="header">
    <div class="nav">
      <ul>
        <li><a href="#">Main 1</a></li>
        <li><a href="#">Main 2</a></li>
        <li><a href="#">Main 3</a></li>
      </ul>
    </div>
  </div>
  <div class="content">
    <h1>Услуги</h1>
    <p>Бизнес — деятельность, направленная на систематическое получение прибыли. В русском языке слова предпринимательство и бизнес используются как синонимы, но иногда имеют разное значение. Бизнес является одним из основных занятий в условиях рыночной
      экономики, источником экономического и социального развития общества. Охватывает производственную, коммерческую, консультационную, банковскую и другие сферы деятельности.</p>
  </div>
  <div class="footer">
    <p>Подвал</p>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.