title: CSS: Skewed centered background
body: <p>I am trying to make a nav menu using 3 images. When you hover over them, I am expanding the hovered one and collapsing the rest. The tricky part is the skewing I am doing. I was able to get it to un-skew the background but cannot seem to get the background centered on the image which is where the main content is. It seems to start in the top left of the image instead of the centre. </p>
  
  <p><a href="https://i.stack.imgur.com/nQo2A.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nQo2A.gif" alt="enter image description here"></a></p>
  
  <p>I was hoping someone would be able to point me in the right direction. How can I centre the background image instead of having the background start in the top left? I have tried using the background-position properties without luck. </p>
  
  <p>Thanks!</p>
  
  <p><a href="https://jsfiddle.net/jspada/4jrhc2eb/5/" rel="nofollow noreferrer">https://jsfiddle.net/jspada/4jrhc2eb/5/</a></p>
  
  <pre><code>.diagonal_box_a {
      transform: skewX(35deg);
      -ms-transform: skewX(35deg); /* IE 9 */
      -webkit-transform: skewX(35deg); /* Safari and Chrome */
      width: 250px;
      height: 357px;
      border-right: 1px solid black;
      border-left: 1px solid black;
  
      /* new styles */
      position: relative;
      top: 0;
      right: 0;
      overflow: hidden;
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      transition: width 0.5s ease;
  }
  
  .diagonal_box_a:hover {
      width: 750px;
  }
  
  .diagonal_box_a::before {
      content: "";
      transform: skewX(-35deg);
      -ms-transform: skewX(-35deg); /* IE 9 */
      -webkit-transform: skewX(-35deg); /* Safari and Chrome */
      border: 1px solid red;
      background-image: url("img/placeholder_desert.jpeg");
      background-repeat: no-repeat;
      background-position: top left;
      position: absolute;
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      width: 1500px; /* something ridiculously big */
      height: 1500px; /* something ridiculously big */
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cA8HR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cA8HR.jpg" alt="Diagram of what I am trying todo"></a></p>