background картинкой для header и section

212
27 июля 2018, 03:10

Иметься такая задача: нужно поместить на фон header'a и section'a одну картинку. Сразу на ум приходит задать body backgoround-image, но я слышал, что так делать неправильно, какие есть варианты? Есть конечно еще вариант задать фон секции, а header'у дать position: absolute, но мне кажется что это тоже не рациональный вариант решения задачи.

Как лучше всего сделать такое?

* { 
  margin: 0 auto; 
} 
 
.container { 
  width: 500px; 
  margin: 0 auto; 
} 
 
header { 
  padding: 20px; 
} 
 
section { 
  padding: 20px; 
} 
 
footer { 
  background-color: blue; 
}
<body> 
  <header> 
    <div class="container"> 
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia eos dolor officia molestias maxime nisi veniam aperiam ut ea illo! Quod reiciendis eaque esse quam provident veritatis delectus, molestias inventore! 
    </div> 
  </header> 
  <section> 
    <div class="container"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis eos similique veritatis beatae, quisquam officia aliquid aperiam qui incidunt dignissimos delectus reprehenderit facere libero consequatur ipsa expedita totam necessitatibus numquam? 
      Nisi omnis sed earum voluptatibus recusandae excepturi quisquam explicabo totam. Nostrum magnam, repellendus sit animi sed perferendis dignissimos praesentium eius minima dolor facere, optio laborum dolores illum ipsa, similique a. 
      Excepturi ad est explicabo eos possimus amet officiis, fugiat adipisci ipsa exercitationem cupiditate eum voluptate in quas dolore repudiandae recusandae mollitia quisquam aliquam. Asperiores obcaecati quo beatae quis earum cumque. 
      Aliquam quibusdam facilis suscipit dolorum quas dolore laborum provident illo vero blanditiis! Provident, quod! Repudiandae harum omnis, magni excepturi ipsum, eum, placeat veritatis alias impedit saepe voluptatibus velit laborum minus. 
    </div> 
  </section> 
  <footer> 
    <div class="container"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo repellendus quos tempora enim! Sapiente suscipit sed dolorum deserunt quibusdam quia. Doloremque ipsum consectetur non inventore excepturi molestiae corporis deserunt illo. 
    </div> 
  </footer> 
</body>

Answer 1

можно обернуть два нужных блока в некий контейнер..примерно так

.back { 
  background: red; 
} 
 
header, 
section { 
  min-height: 200px; 
} 
 
header { 
  border-bottom: 1px solid #bbb; 
} 
 
footer { 
  background: blue; 
  height: 150px; 
}
<div class="back"> 
  <header></header> 
  <section></section> 
</div> 
<footer></footer>

READ ALSO
Не убираются метки
HTML

Не убираются метки

 190
Ajax работает в Mozilla, почему не работает в Chrome?
HTML

Ajax работает в Mozilla, почему не работает в Chrome?

Использую вот это https://githubcom/nk-o/ajax-contact-form

 185
Как сверстать fluid grid?
HTML

Как сверстать fluid grid?

Есть вот такая индусская версткаЕё необходимо сверстать как на скриншоте

 324
Bootstrap не масштабируется окно на телефоне
HTML

Bootstrap не масштабируется окно на телефоне

Сделал страничку на бутстрапе - wwwshumik

 184