Как лучше всего раскидать эти элементы по странице?

Question

[tester]

Думаю с помощью позиционирования, но как по мне - это коряво.

Answer 1

[Даниил Кириллов]

background-image во весь блок

Comments

[Сергей Горячев]

Одной картинкой и без геморроев.

[Сергей delphinpro]

Сергей Горячев, Зачем же одной? Возможно несколько малюсеньких будут меньше весить. К тому же можно будет задать разную привязку

background:
  url('el1.png') no-repeat left 10px top 20px,
  url('el2.png') no-repeat right 10px top 20px,
  url('el3.png') no-repeat left 50% bottom 20px

[Сергей Горячев]

Сергей delphinpro, а я думаю, что без разницы, загрузить одну большую или 10 маленьких. Переведен ли сервер на HTTP/2 не известно, а если нет, то GIF, 8-битная загрузится быстро, даже большая.

[Сергей delphinpro]

Сергей Горячев, ну в основном я заметку сделал по-поводу привязки к сторонам.
представь, что там стало не 3x1 блоков, а 3х2 или 3х4.
background-size не поможет, элементы непропорционально деформируются.

[Сергей Горячев]

Сергей delphinpro, background-repeat?)

[Сергей delphinpro]

Сергей Горячев, ну на худой конец можно и репит =)

Answer 2

[Lumore]

background-image + repeat