Вывод фона за пределы контейнера

150

27 ноября 2018, 13:20

В блоке в центральной части есть блок, который разделен на две части, в правом блоке у текста есть фон который идет от начала текста до правого края экрана, центральная часть не меняется(центрирован через margin).

Какие есть способы это сделать?

Answer 1

Можно поместить центрирующий контейнер внутрь блока, и половину блока заполнить фоном:

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.container { 
  margin: 0 auto; 
  max-width: 70%; 
} 
 
section { 
  background: #cda; 
  min-height: 50px; 
  border: 1px solid; 
} 
 
.block { 
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg/300px-Bliss_location%2C_Sonoma_Valley_in_2006.jpg) no-repeat right center/50% auto; 
} 
 
.block__container { 
  display: flex; 
} 
 
.block__item { 
  width: 50%; 
  height: 40px; 
  border: 1px solid; 
}

<div class="container"> 
  <section></section> 
  <section></section> 
</div> 
<div class="block"> 
  <div class="container block__container"> 
    <div class="block__item"></div> 
    <div class="block__item"></div> 
  </div> 
</div> 
<div class="container"> 
  <section></section> 
</div>

Или псевдоэлементом

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.container { 
  margin: 0 auto; 
  max-width: 70%; 
} 
 
section { 
  background: #cda; 
  min-height: 50px; 
  border: 1px solid; 
} 
 
.block { 
  display: flex; 
  position: relative; 
} 
 
.block:before { 
  content: ''; 
  display: block; 
  position: absolute; 
  width: 50vw; 
  height: 100%; 
  top: 0; 
  left: 50%; 
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg/300px-Bliss_location%2C_Sonoma_Valley_in_2006.jpg) no-repeat center/cover; 
} 
 
.block__item { 
  width: 50%; 
  height: 40px; 
  border: 1px solid; 
  position: relative; 
  z-index: 2; 
}

<div class="container"> 
  <section></section> 
  <section></section> 
  <div class="block"> 
    <div class="block__item"></div> 
    <div class="block__item"></div> 
  </div> 
  <section></section> 
</div>