<div class="raw first"></div>
<div class="raw second pos1"></div>
<div class="raw second pos1a"></div>
<div class="raw second pos2"></div>
<div class="raw second pos3"></div>
<div class="raw second pos4"></div>

body, html {
  overflow-x: hidden;
  width: 99%;
  height: 200%;
}
.raw {
  //border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("http://st-im.kinopoisk.ru/im/wallpaper/2/3/0/kinopoisk.ru-True-Detective-2300505--w--1280.jpg");
  //background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  &.first {
    position: fixed;
  }
  &.second {
    background-attachment: fixed;
    .trans(10deg, 1.02, 1.02, 0, 0, 0, 0);
  }
  &.pos1 {
    width: 100%;
    height: 20%;
    .pos(0, 40px);
  }
  &.pos1a {
    width: 100%;
    height: 20%;
    .pos(0, 40px);
    .trans(3deg, 1.02, 1.02, 0, 0, 0, 0);
  }  
  &.pos2 {
    width: 100%;
    height: 40%;
    .pos(415px, 440px);
    .trans(-10deg, 0.95, 0.95, 0, 0, 0, 0);
  }
   &.pos3 {
    width: 100%;
    height: 30%;
    .pos(-200px, 500px);
    .trans(20deg, 1.05, 1.05, 0, 0, 0, 0);
  } 
   &.pos4 {
    width: 100%;
    height: 15%;
    .pos(0px, 250px);
    .trans(-3deg, 1, 1, 0, 0, 0, 0);
  }  
}

.trans(@ang, @scx, @scy, @wx, @wy, @x, @y){
transform: rotate(@ang) scale(@scx, @scy) skew(@wx, @wy) translate(@x, @y);
-webkit-transform: rotate(@ang) scale(@scx, @scy) skew(@wx, @wy) translate(@x, @y);
-moz-transform: rotate(@ang) scale(@scx, @scy) skew(@wx, @wy) translate(@x, @y);
-o-transform: rotate(@ang) scale(@scx, @scy) skew(@wx, @wy) translate(@x, @y);
-ms-transform: rotate(@ang) scale(@scx, @scy) skew(@wx, @wy) translate(@x, @y);  
}
.pos (@x, @y) {
  top: @y;
  left: @x;
  background-position-x: @x*(-1);
  background-position-y: @y*(-1);
}