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