Как сделать адаптивный фон на часть экрана?

122

06 октября 2019, 00:40

помогите, пожалуйста, реализовать одну вещь. Есть некий фон, который должен равняться по центру блоков со свойством "display: inline-block;". Сайт должен сохранять адаптивность, фон должен растягиваться по ширине экрана. Выглядеть это должно как-то так:

На полный экран:

В мобильной версии:

Синим цветом отмечены края окна браузера, красным - линия, по которой должен равняться фон. Можно ли реализовать это на чистом css или же придется прибегать к JS. Если да, то как? Спасибо.

Заготовка на CSS

.bg-img {  
 
	z-index: -1; 
	background-position: top; 
	background-size: contain; 
	position: absolute; 
	/*min-height: 72.5vw;*/ 
	height:55rem; 
	width: 100%; 
	top: 0; 
	left: 0px; 
 }

Answer 1

Как вариант

.header-content { 
  display: block; 
  width: 100%; 
  height: 80vh; 
  background: green; 
  position: relative; 
} 
 
.list { 
  display: block; 
  width: 100%; 
  position: absolute; 
  bottom: 0; 
  transform: translateY(50%); 
  text-align: center; 
  font-size: 0; 
} 
 
.item { 
  display: inline-block; 
  font-size: 100%; 
  width: 100px; 
  height: 50px; 
  background: blue; 
} 
 
.item:not(:last-child) { 
  margin-right: 5px; 
} 
 
@media print, screen and (max-width: 600px) { 
  .header-content { 
    height: 40vh; 
  } 
}

<div class="header-content"> 
  <div class="list"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
</div>