Фон картинкой рамки слева

19 июля 2021, 13:30

Не могу уже несколько часов примудрить в стилях css изображение для фона. То есть необходимо сделать рамку слева одним изображением и рамку справа другим изображением. Не нужно все обводить, а только left и right. Помогите сделать.

Вот общий макет того, что мне необходимо. Красные полосы не должны быть стилем тега body.

Answer 1

Есть несколько вариантов.

"столбцы" из элементов

В качестве позиционирования можно использовать что угодно, 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>

Answer 2

Используйте ::after и ::before псевдоэлементы, правда нужно знать сначала что у вас за контейнер, но в общем виде будет что то вроде

.container::after, .container::before{
  content: '';
  display: block;
  widht: 5%;
  height: 100%;
}
.container::before{
  background-image: url(/img1.jpg);
}
.container::after{
  background-image: url(/img2.jpg);
}

Но всё же следовало конкретней описать ситуацию, в частности html и css код контейнера