Implementing the background of a block of icons in CSS

Question

css

Hello! If anyone can, please share your implementation of CSS background icons.
Options that I tried:
1) Push a large background (1920 x 620), but the main drawback is the huge size of the image (600 KB);
2) Gluing in parts did not work, because of the angular direction of the icons.
Actually the background itself:

Answer 1

you take slicing icons without tilting, create a div and apply a class to it

.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 */
}

yes, and this class needs to be added

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

Your icon div should be right after the body opening tag

Answer 2

habrahabr.ru/post/117160/