Как правильно сверстать блок?

Question

[MRcracker]

Подскажите,как правильно сверстать блок так, чтобы точки были у блока текст и они уменьшались если текста становится больше?

.contact {
  &:after {
    content: " ";
    background-image: url ('img/img.jpg') repeat-x;
    position: absolute;
  }
}

P.S. В моем примере точки будут немного не стандартные и их нужно вставить картинкой. Не могу понять как сделать чтобы картинка обрезалась в зависимости от точек.

Comments

[archelon]

картинку фоном background-repeat: repeat-x;

[MRcracker]

archelon, когда repeat добавляю картинка пропадает. как это можно исправить?

[Александр]

MRcracker, в песочницу оформите своё решение.

[MRcracker]

Александр, добавил код

[Александр]

MRcracker, задайте ширину и картинка появится. А ещё можно переделать на флексы и картинку поставить в элемент, который будет замещать свободное место.

Answer 1

[Rsa97]