0

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

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

2 ответа 2

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>

0

Используйте ::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 код контейнера

4
  • Вообще ничего не происходит) Картинка 100% есть. Блок прописан сразу после открытия body и закрыт перед закрытием body) 11 сен 2019 в 20:46
  • Повторюсь без кода говорить сложно, но возможно ваш контейнер не имеет фиксированной высоты, по этому высота псевдоэлементов становится равна нулю. Если причина в этом, то примените display: flex к контейнру
    – Repet
    11 сен 2019 в 20:56
  • pastebin.com/Vc0VVXTB вот все мои стили. Макет можно посмотреть тут через исходник yoububer.space 11 сен 2019 в 21:00
  • 1
    не понимаю, что за вторая ссылка, на будущие приводите код на самом сайте и как Я заметил у вас в css больше нигде не фигурирует .container - этот класс был приведён для примера, Я не знаю вашего именования вместо контейнера нужно поставить класс того элемента которому вы хотите задать фон
    – Repet
    11 сен 2019 в 21:08

Ваш ответ

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

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