Адаптивное фоновое изображение

243

06 февраля 2018, 07:19

'use strict'; 
 
(function () { 
  var navSection = document.querySelector('.main-nav'); 
  var toggler = navSection.querySelector('.main-nav__toggle'); 
 
  navSection.classList.remove('main-nav--nojs') & 
  navSection.classList.remove('main-nav--opened') & 
  navSection.classList.add('main-nav--closed'); 
 
  let clickTogglerHandler = function () { 
    if (navSection.classList.contains("main-nav--closed")) { 
      navSection.classList.remove("main-nav--closed"); 
      navSection.classList.add("main-nav--opened"); 
    } 
    else { 
      navSection.classList.add("main-nav--closed"); 
      navSection.classList.remove("main-nav--opened"); 
    } 
  }; 
 
  toggler.addEventListener('click', clickTogglerHandler); 
})();

html { 
  box-sizing: border-box; 
} 
 
*, 
*::before, 
*::after { 
  box-sizing: inherit; 
} 
 
html, 
body { 
  position: relative; 
  height: 100%; 
} 
 
body { 
  min-width: 320px; 
  font-family: 'PT Sans', 'Arial', sans-serif; 
  font-size: 17px; 
  line-height: 30px; 
  color: #233539; 
  padding: 0; 
  margin: 0; 
} 
 
img { 
  max-width: 100%; 
  height: auto; 
} 
 
@media (min-width: 768px) { 
  body { 
    min-width: 768px; 
  } 
} 
@media (min-width: 1150px) { 
  body { 
    min-width: 1050px; 
  } 
} 
.main-container { 
  background-image: url("https://images.unsplash.com/photo-1517788783049-b396d32b5852?ixlib=rb-0.3.5&amp;s=75deaa14f86707d43f183bc3aa60b547&amp;auto=format&amp;fit=crop&amp;w=1029&amp;q=80 1029w"); 
  background-size: cover; 
  background-position: top; 
} 
 
@media (min-width: 1150px) { 
  .main-container { 
    background-image: url("https://images.unsplash.com/photo-1517788783049-b396d32b5852?ixlib=rb-0.3.5&amp;s=75deaa14f86707d43f183bc3aa60b547&amp;auto=format&amp;fit=crop&amp;w=1029&amp;q=80 1029w"); 
    background-position: 0 -80px; 
  } 
} 
.main-header { 
  min-height: 50px; 
  background-color: #233539; 
  padding-top: 20px; 
} 
 
.main-header__container { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
} 
 
.main-header__logo { 
  text-align: center; 
  margin-bottom: 10px; 
} 
 
.main-header__logo-text { 
  font-family: 'PT Sans Bold', sans-serif; 
  font-size: 24px; 
  font-weight: 700; 
  color: #ffffff; 
  margin: 0; 
} 
 
@media (min-width: 768px) { 
  .main-header { 
    padding-top: 0; 
  } 
 
  .main-header__container { 
    width: 768px; 
    min-height: 60px; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
    padding-left: 50px; 
    padding-right: 50px; 
    margin: 0 auto; 
  } 
 
  .main-header__logo { 
    margin-bottom: 0; 
  } 
} 
@media (min-width: 1150px) { 
  .main-header__container { 
    width: 1150px; 
    padding-left: 100px; 
    padding-right: 100px; 
  } 
 
  .main-header__logo { 
    margin-bottom: 0; 
  } 
} 
@media (min-width: 1441px) { 
  .main-header__container { 
    width: 1440px; 
    margin: 0 auto; 
  } 
} 
@media (max-width: 767px) { 
  .main-nav { 
    position: relative; 
  } 
 
  .main-nav__list { 
    width: 100%; 
  } 
 
  .main-nav--closed .main-nav__list { 
    display: none; 
  } 
 
  .main-nav__toggle { 
    display: none; 
    position: absolute; 
    z-index: 50; 
    top: -30px; 
    right: 30px; 
    padding: 0; 
  } 
 
  .main-nav--closed .main-nav__toggle { 
    display: block; 
  } 
 
  .main-nav--opened .main-nav__toggle { 
    display: block; 
  } 
 
  .main-nav--nojs .main-nav__toggle { 
    display: none; 
  } 
 
  .main-nav--opened .main-nav__wrapper { 
    position: absolute; 
    z-index: 10; 
    top: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(35, 53, 57, 0.95); 
  } 
 
  .main-nav--nojs .main-nav__wrapper { 
    position: static; 
  } 
} 
@media (min-width: 768px) { 
  .main-nav__toggle { 
    border: 0; 
    clip: rect(1px, 1px, 1px, 1px); 
    clip-path: inset(50%); 
    height: 1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    white-space: nowrap; 
  } 
 
  .main-nav__wrapper { 
    display: flex; 
    justify-content: space-between; 
    width: 500px; 
  } 
} 
@media (min-width: 1150px) { 
  .main-nav__wrapper { 
    width: 700px; 
  } 
} 
.navigation-list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
} 
 
.navigation-list__element { 
  margin-bottom: 10px; 
} 
.navigation-list__element:last-child { 
  margin-bottom: 0; 
} 
 
.navigation-list__element-link { 
  font-size: 18px; 
  font-weight: 700; 
  color: #ffffff; 
  text-decoration: none; 
} 
.navigation-list__element-link--active { 
  color: #dd3366; 
} 
 
@media (min-width: 768px) { 
  .navigation-list { 
    flex-direction: row; 
    align-items: center; 
    margin-bottom: 0; 
  } 
 
  .navigation-list__element { 
    margin-right: 20px; 
    margin-bottom: 0; 
  } 
  .navigation-list__element:last-child { 
    margin-right: 0; 
  } 
} 
@media (min-width: 1150px) { 
  .navigation-list__element { 
    margin-right: 35px; 
  } 
 
  .navigation-list__element-link { 
    font-size: 19px; 
  } 
  .navigation-list__element-link:hover, .navigation-list__element-link:focus { 
    color: #dd3366; 
  } 
  .navigation-list__element-link:active { 
    opacity: 0.3; 
  } 
} 
.page-main { 
  min-height: 85vh; 
} 
 
.main-preview { 
  padding-top: 70px; 
  padding-bottom: 50px; 
} 
 
.main-preview__container { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 320px; 
  margin: 0 auto; 
} 
 
.main-preview__title { 
  font-family: 'PT Sans Bold', sans-serif; 
  font-size: 28px; 
  margin: 0; 
  margin-bottom: 10px; 
} 
.main-preview__title::before { 
  top: -10px; 
} 
 
.main-preview__subtitle { 
  font-family: 'PT Sans', sans-serif; 
  font-size: 20px; 
  font-weight: 400; 
  margin: 0; 
} 
.main-preview__subtitle::before { 
  bottom: -10px; 
} 
 
.main-preview__title::before, 
.main-preview__subtitle::before { 
  position: absolute; 
  content: ''; 
  width: 230px; 
  height: 2px; 
  left: 45px; 
  background-color: #233539; 
} 
 
@media (min-width: 768px) { 
  .main-preview { 
    padding-top: 100px; 
    padding-bottom: 100px; 
  } 
 
  .main-preview__container { 
    width: 768px; 
  } 
 
  .main-preview__title { 
    font-size: 30px; 
    margin-bottom: 10px; 
  } 
  .main-preview__title::before { 
    top: -15px; 
  } 
 
  .main-preview__subtitle { 
    font-size: 23px; 
  } 
  .main-preview__subtitle::before { 
    bottom: -10px; 
  } 
 
  .main-preview__title::before, 
  .main-preview__subtitle::before { 
    width: 250px; 
    left: 50%; 
    transform: translateX(-50%); 
  } 
} 
@media (min-width: 900px) { 
  .main-preview { 
    padding-top: 130px; 
  } 
} 
@media (min-width: 1150px) { 
  .main-preview { 
    padding-top: 90px; 
  } 
 
  .main-preview__title { 
    font-size: 45px; 
  } 
 
  .main-preview__subtitle { 
    font-size: 29px; 
  } 
 
  .main-preview__title::before, 
  .main-preview__subtitle::before { 
    width: 400px; 
  } 
} 
@media (min-width: 1330px) { 
  .main-preview { 
    padding-top: 170px; 
  } 
 
  .main-preview__container { 
    width: 1150px; 
  } 
} 
@media (min-width: 1700px) { 
  .main-preview { 
    padding-top: 260px; 
  } 
 
  .main-preview__title { 
    font-size: 65px; 
    margin-bottom: 50px; 
  } 
  .main-preview__title::before { 
    top: -40px; 
  } 
 
  .main-preview__subtitle { 
    font-size: 45px; 
  } 
  .main-preview__subtitle::before { 
    bottom: -30px; 
  } 
 
  .main-preview__title::before, 
  .main-preview__subtitle::before { 
    width: 500px; 
    left: 50%; 
    transform: translateX(-50%); 
  } 
} 
@media (min-width: 2100px) { 
  .main-preview { 
    padding-top: 370px; 
  } 
} 
.main-footer { 
  min-height: 60px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: #233539; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  padding-left: 30px; 
  padding-right: 30px; 
} 
 
.main-footer__text { 
  font-family: 'PT Sans', sans-serif; 
  font-size: 14px; 
  color: #ffffff; 
  margin: 0; 
} 
 
@media (min-width: 1150px) { 
  .main-footer__text { 
    font-size: 16px; 
  } 
}

<body> 
  <div class="main-container"> 
      <header class="main-header"> 
        <img src="https://unsplash.com/photos/pnwh6uARCQ4" alt="" width="200" height="200"> 
        <img src="https://monosnap.com/file/MWLOHUiYiptN6DoNB6PR2PThOrtYTU" alt="" width="200" height="200"> 
        <div class="main-header__container"> 
          <div class="main-header__logo"> 
            <span class="main-header__logo-text">ЛОГО</span> 
          </div> 
          <nav class="main-header__navigation main-nav main-nav--nojs main-nav--opened"> 
            <button class="main-nav__toggle" type="button"> 
              <span >Открыть меню</span> 
            </button> 
            <div class="main-nav__wrapper"> 
              <ul class="main-nav__list navigation-list"> 
                <li class="navigation-list__element"> 
                  <span class="navigation-list__element-link navigation-list__element-link--active">Главная</span> 
                </li> 
                <li class="navigation-list__element"> 
                  <a class="navigation-list__element-link" href="#">Пункт 1</a> 
                </li> 
                <li class="navigation-list__element"> 
                  <a class="navigation-list__element-link" href="#">Пункт 2</a> 
                </li> 
                <li class="navigation-list__element"> 
                  <a class="navigation-list__element-link" href="#">Пункт 3</a> 
                </li> 
              </ul> 
            </div> 
          </nav> 
        </div> 
      </header> 
 
      <main class="page-main"> 
        <section class="main-preview"> 
          <div class="main-preview__container"> 
            <h1 class="main-preview__title">Title-title</h1> 
            <h2 class="main-preview__subtitle">Subtitle-Subtitle-Subtitle</h2> 
          </div> 
        </section> 
      </main> 
 
      <footer class="main-footer"> 
        <p class="main-footer__text">© Copyright</p> 
      </footer> 
    </div>   
</body>

Здравствуйте, у меня есть страничка, которую сверстал — Страница на codeopen

Так вот, я не могу совладать с фоновым изображением. То есть, я на своей ширине браузера — 1440px выставил заголовок как мне хотелось бы чтобы он выглядел. Но так как изображение масштабируется в блоке (background-size: cover), то на разных ширинах Заголовок оказывается в разных частях картинки. Собственно вопрос в том, как можно зафиксировать мой заголовок, чтобы он всегда был по середине картинки (экран ноутбука) ? Картинку задаю в диве .main-container Хочется какое-то верное решение, чтобы не изобретать велосипед, не задавать постоянные padding на разных media requires.