title: CSS: Background-image positioning with border
body: <p>Been working on this for days and cannot seem to resolve it.</p>
  
  <p>I have this:</p>
  
  <pre><code>&lt;div class="outer-border"&gt;
    &lt;div class="grid-layout"&gt;
      &lt;div class="grid"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For the <code>outer-border</code> I have a roman-styled border which is 60 px on top and bottom and 100 px on left and right.</p>
  
  <p>I want to add a background-image to the <code>grid-layout</code> and make it cover the content part and part of the border.</p>
  
  <p>Is there anyway to position the background-image properly for this case?
  Right now I get:
  <a href="https://i.stack.imgur.com/hp0h0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hp0h0.jpg" alt="enter image description here"></a></p>
  
  <p>Where I used <code>background-size: cover;</code> which works vertically but not horizontally and is not responsive.</p>
  
  <p>My css:</p>
  
  <pre><code>.outer-border {
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-image: url($outer_no_top) 23% 15% 23% 15% repeat;
  
    background-image: url("theme/matrix-marble.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right
  }
  </code></pre>
  
  <p>Right now the background is only a .jpg, but I have tried different formats but still cannot handle the positioning.</p>
  
  <p>I got it to work in a good way by putting it as a background to the <code>grid-layout</code>, then I had to work with positioning, z-index and negative margins to put it behind the border. This led to the links inside the <code>grid</code> to become unclickable.</p>
  
  <p>Totally stuck right now, any clues?</p>
  
  <p>/David</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>JsFiddle:
  <a href="https://jsfiddle.net/bcn42gvm/1/" rel="nofollow noreferrer">https://jsfiddle.net/bcn42gvm/1/</a></p>