Bootstrap — как поместить background-image div'a за пределы контейнера?

Question

[wonder_uix]

Вот "проблема" с которой я столкнулся. Плитки шириной по 6 колонок где нужно поместить фоновое изображение за пределы container'a. Как это сделать? Я пробовал сделать отдельные блоки и сверху наложить текст, вроде бы получилось но на телефонах это страшно выглядит.

Comments

[Сергей Горячев]

Обычные псевдоэлементы, там более, что их как раз два - after и before. Ничего сложного.

<div class="row">
  <div class="col-md-6 left"></div>
  <div class="col-md-6 right"></div>
</div>

.left, .right {
  position: relative;
}
.left:before {
  content: '';
  position: absolute;
  background: url() transparent;
  top: 0;
  right: -40px;
}
.left:after {
  content: '';
  position: absolute;
  background: url() transparent;
  bottom: 0;
  left: 50%;
}
.right:before {}
.right:after {}

Answer 1

[Амир Алимжанов]

<div class="block">
    <div class="container">
        <div class="row">
            <div class="col-md-6 left"></div>
            <div class="col-md-6 right"></div>
        </div>
    </div>
</div>

.block {
  background-image: url('....');
}