CSS: Background-image positioning with border

Been working on this for days and cannot seem to resolve it.

I have this:

<div class="outer-border">
  <div class="grid-layout">
    <div class="grid"></div>
  </div>
</div>

For the outer-border I have a roman-styled border which is 60 px on top and bottom and 100 px on left and right.

I want to add a background-image to the grid-layout and make it cover the content part and part of the border.

Is there anyway to position the background-image properly for this case?
Right now I get:
enter image description here

Where I used background-size: cover; which works vertically but not horizontally and is not responsive.

My css:

.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
}

Right now the background is only a .jpg, but I have tried different formats but still cannot handle the positioning.

I got it to work in a good way by putting it as a background to the grid-layout, 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 grid to become unclickable.

Totally stuck right now, any clues?

/David


Source: css3

Leave a Reply