<div class="wrapper">
<div class="bg"></div>
<div class="container">
<div class="block">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
<div class="block">
<img src="data:image/jpeg;base64,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" alt="">
</div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
z-index: 2;
min-height: 100vh;
background: #000;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.bg {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
min-height: 100vh;
max-width: 1400px;
border-right: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
}
.bg::before,
.bg::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 25%;
}
.bg::before {
left: 25%;
border-right: 1px solid #1F1F1F;
border-left: 1px solid #1F1F1F;
}
.bg::after {
right: 25%;
border-right: 1px solid #1F1F1F;
}
.block {
position: relative;
z-index: 3;
height: 300px;
color: #fff;
}
.block>img {
display: block;
width: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.