title: how to create a cascade of Slanted / Skewed divs with background-image
body: <p>I'm willing to create something specific like this:</p>
  
  <p><a href="http://i.stack.imgur.com/jdk9B.png" rel="nofollow">http://i.stack.imgur.com/jdk9B.png</a></p>
  
  <p>with the background colors representing background-images.</p>
  
  <p>My approach was to create a general div with children divs acting as parents for the divs where the images are going and rotate them (each parent div child of the general one).With a random rotation between -11deg and 11deg and its respective negative rotation on the images div to counter its parent rotation. The main problem I am encountering is that I use absolute position for this purpose and I lose the hability to wrap my images inside its parent divs. </p>
  
  <p>I am using jquery to rotate each odd and even div on a positive or negative degree and the same to counter its rotation on the images.</p>
  
  <p>I need to know if there is a way to do achieve this design, and if there was, see the light at the end of the tunel because I have been stuck with this for days... </p>
  
  <p>Thanks everyone :D</p>
  
  <p>My general structure right now is this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.rotated-divs').children().each(function () {
  
   if($(this).parent().children().index(this)%2 == 0){ 
      $(this).css({"transform":"rotate(11deg)"});
  
      if($(this).parent().children().index(this) &gt; 1){
    $(this).css({"top":"-150px"});//.css({"transform":"rotate(11deg)"})
  
   }
   }
  
   else{
     $(this).css({"transform":"rotate(-11deg)","top":"-150px"});
   }
   
  });
  
   $(".img-container:even").css({"transform":"rotate(-11deg)"});
   $(".img-container:odd").css({"transform":"rotate(11deg)"});</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rotated-divs{
  
   position: absolute;
   width: 100%;
   top: 0;
   left: -100px;
   overflow: hidden;
    
   .div-r{
    width: 250%;
    height: 600px;
    position: relative;
    border: 3px solid yellow;
  
    .img-container{
     width: 75vw;
     height: 100%;
     background-position: center;
     background-size: cover;
     position: absolute;
     left: 100px;
     
    }
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rotated-divs"&gt;
    &lt;div class="div-r" &gt;
     &lt;div  class="img-container" style="background-image: url(img/01.jpg);"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="div-r"&gt;
     &lt;div  class="img-container" style="background-image: url(img/02.jpg);"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="div-r"&gt;
     &lt;div  class="img-container" style="background-image: url(img/03.jpg);"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="div-r"&gt;
     &lt;div  class="img-container" style="background-image: url(img/04.jpg);"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>