Есть несколько вариантов.
"столбцы" из элементов
В качестве позиционирования можно использовать что угодно, display: inline-block
, display: grid
, display: flex
. Так же и с элементами, это могут быть любые элементы или псевдоэлементы ::before
и ::after
.
Покажу на display: grid
+ псевдоэлементы.
body {
margin: 0;
}
.max-wrap {
display: grid;
grid-template-columns: 40px 1fr 40px; /* 40px - ширина левого и правого блока, 1fr - "авто" ширина контента */
width: 100%;
max-width: 300px;
min-height: 100vh;
margin: 0 auto;
}
.max-wrap::before,
.max-wrap::after {
content: '';
display: block;
width: 100%;
height: 100%;
background-repeat: repeat-y;
background-position: top center;
background-size: 40px;
/* В качестве фона будем использовать текстуры, по этому такие настройки background */
}
.max-wrap::before {
background-image: url('https://i.imgur.com/ZSw5rKR.png');
}
.max-wrap::after {
background-image: url('https://i.imgur.com/cwUbhCI.png');
}
.content {
display: block;
width: 100%;
background: lightblue;
}
<div class="max-wrap">
<div class="content"></div>
</div>
border-image
Тоже вариант, правда поддержка не очень, и использовать можно только одно изображение..
body {
margin: 0;
}
.content {
display: block;
width: 100%;
max-width: 300px;
min-height: 100vh;
margin: 0 auto;
background: lightblue;
border-left: 40px solid #ccc;
border-right: 40px solid #ccc;
border-image: url('https://i.imgur.com/ZSw5rKR.png');
border-image-slice: 40;
border-image-repeat: repeat;
}
<div class="content"></div>