title: How do I unskew background image in skewed layer (CSS)?
body: <p>I'm trying to display a profile photo like this / - / (the slashes represent slants using skewX, the hyphen represents a horizontally-aligned background image).</p>
  
  <p>The problem is that this code also skews the background image:</p>
  
  <pre><code>.photo {
  transform: skewX(35deg); 
  -ms-transform: skewX(35deg); /* IE 9 */
  -webkit-transform: skewX(35deg); /* Safari and Chrome */
  width: 100px; 
  height: 92px; 
  border-right: 1px solid black; 
  border-left: 1px solid black; 
  background-image: url('silhouette.png'); 
  background-repeat: no-repeat; 
  background-position: top left; 
  }
  
  ...
  
  &lt;div class="photo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've tried to reverse the background skew like this:</p>
  
  <pre><code>.photo {
  transform: skewX(35deg); 
  -ms-transform: skewX(35deg); /* IE 9 */
  -webkit-transform: skewX(35deg); /* Safari and Chrome */
  width: 100px; 
  height: 92px; 
  border-right: 1px solid black; 
  border-left: 1px solid black; 
  }
  
  .photo div {
  transform: skewX(-35deg); 
  -ms-transform: skewX(-35deg); /* IE 9 */
  -webkit-transform: skewX(-35deg); /* Safari and Chrome */
  width: 100%; 
  height: 100%; 
  background-image: url('silhouette.png'); 
  background-repeat: no-repeat; 
  background-position: top left; 
  }
  
  ...
  
  &lt;div class="photo"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>...but I get / [-] / (the background doesn't fit flush to the slants).</p>
  
  <p>I've been at this all day, please can you help me? I've got coder's bock!</p>