Как лучше сверстать фон?

Question

[warcevil]

Как лучше сверстать такой бэкграунд? Думаю что вставлять единую картинку будет очень глупо, так как при растягивании она будет становиться ужасной. Абсолютно позиционировать каждый шарик думаю также глупо. Вообщем ничего умного мне так и не пришло в голову. Хотя думаю правильно было бы сделать задний фон с этой белой стрелкой, а остальное сделать вставкой трех картинок. Как бы вы поступили с этим макетом?

Comments

[V Sh.]

сделайте двойной фон: обычный серый фон + векторный рисунок "стрелка". При растягивании все должно быть нормально. Размеры указывайте в %, если важна адаптивность.

[warcevil]

ок, а как эти шарики делать? просто 3 картинками влепить?

Answer 1

[Finesse]

Фон страницы: серый цвет + картинка с белым треугольником. Примерно так:

body {
  background-color: #ccc;
  background-image: url('../images/triangle.png');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

А ширики и прочие узоры в виде картинок, заполняющих колонки рядом с текстом (всё, что слева/справа от блока текста — одна картинка). Так есть возможность скрыть шарики на мобильных экранах, чтобы не отнимать драгоценное место, останется только текст на серо-белом фоне.