0

Добрый день! Есть секция лендинга на бутстрапе. Ей надо задать 2 фона. 1 фон width 40%, 2 фон 60%. Проблема в том, как сделать, чтобы эти фоновые изображения выходили за рамки сетки бутстрап, но контент на этом фоне был по сетке? Надеюсь объяснил доступно, заранее спасибо!

1
  • Лучше нарисуй и твой код bootstrap добавь
    – code211218
    30 мар 2017 в 7:26

1 ответ 1

1

.custom {
  position: relative;   
  padding: 5rem 0;
  text-align: center;
}

.custom:before,
.custom:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.custom:before {
  right: 40%;
  left: 0px;
  background: url(https://dummyimage.com/600x400/ccc/fff&text=img1) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.custom:after {
  left: 60%;
  right: 0px;
  background: url(https://dummyimage.com/600x400/red/fff&text=img2) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.custom .container {
  position: relative;
  z-index: 2;
}
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  
  <section class="custom">
    <div class="container">
      <div class="row">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vitae explicabo recusandae culpa cupiditate reprehenderit perspiciatis id rerum incidunt ab, nam vel quas. Inventore quis sequi, autem, libero itaque a.
        </p>
      </div>
    </div>
  </section>

1
  • 1
    Спасибо за помощь!
    – Антон
    30 мар 2017 в 7:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.