Реализация фона у блока из иконок на CSS

Question

[Виктор Артемьев]

Всем привет! Если кто может, поделитесь Вашей реализаций фона иконками на CSS.

Варианты которые пробовал я:
1) Запихнуть фон большого размера (1920 х 620), но главный недостаток огромный размер изображения (600 КБ);
2) Склейка частями не получилась, из-за углового направления иконок.

Собственно сам фон:

Answer 1

[Данил Нестеров]

берешь нарезку иконок без наклона создаешь div и применяешь к нему класс

.thisdiv {
      position:absolute;
      z-index:-1;
      background:url(вашанарезкадлядублирования.png) repeat top center;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      -moz-transform: rotate(-10deg);  /* Firefox */
      -o-transform: rotate(-10deg);  /* Opera */
      -webkit-transform: rotate(-10deg);  /* Safari y Chrome */
      filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9071067811865476, M12=0.7071067811865475, M21=-0.9071067811865475, M22=0.9071067811865476); /* IE */
}

да и вот этот class нужно добавить

body,html {
width:100%;
height:100%;
}

Ваш div с иконками должен быть сразу после тега открытия body

Comments

[Данил Нестеров]

ну и вырезанный ваш фон для моего кода s5.hostingkartinok.com/uploads/images/2013/12/104e...

Answer 2

[Michael Danilov]

Оригинал: How to Apply CSS3 Transformations to Background Images
На основе вашей картинки: jsfiddle.net/michaeldanilov/54qG3/

Comments

[andreystrelkov]

А как ещё заставить скроллироваться?

Answer 3

[Mikhail Osher]

habrahabr.ru/post/117160/

Comments

[Mikhail Osher]

Такой вариант, что нарезать прямоугольниками с прозрачными частями, которые могут наложиться друг на друга. Как раз сомкнутся.

[Виктор Артемьев]

Спасибо, сейчас буду пробовать.

[Mikhail Osher]

Я имел ввиду, что в прямоугольнике верхний нижний угол и верхний правый будут прозрачными, а диагональ topelft > bottomright будет в иконках. Думаю, Вы поняли куда копать. Успехов. :)

[Mikhail Osher]

левый нижний*)