How to place div on top of responsive rotated div?

Question

I'm trying to get this design:

but I'm having trouble with the logo and the swirls, I don't know how to add them. I've tried with absolute positioning, but when resizing the website, the logo and swirls end up somewhere different than the image squares.

How can I add the swirls and the logo?

JSFiddle: http://jsfiddle.net/uHsJv/1/
When you want to edit the JS fiddle, in the images folder on my website you can find the following images:
- the logo (images/logo.png or images/logogroot.png)
- the two swirls on the top including logo (images/boven.png)
- the two swirls on the bottom (images/onder.png)
- the complete 'background' (images/achtergrond.png)

Current HTML:

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

    <div class="box side left"><!-- Open .box -->
        <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->


    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="leftUp"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="leftDown"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box"><!-- Open .box -->
        <a class="boxInner innerMiddle"><!-- Open .boxInner -->
        <div class="overlay white"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="rightUp"><!-- Open .box -->
        <a href="#" class="boxInner innerRightUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="rightDown"><!-- Open .box -->
        <a href="#" class="boxInner innerRightDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box side right"><!-- Open .box -->
        <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

</div></div></div><!-- Close .wrap -->

Current CSS:

body {
    margin: 0;
    padding: 0;
    background-color:#1b1b1b;
}

.outer{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle{
    display: table-cell;
    vertical-align: middle;
}
.wrap {
    margin-left: auto;
    margin-right: auto; 
    height:100%;
    overflow: hidden;

    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;    
}

.box {
    float: left;
    position: relative;
    width: 24.45%;
    padding-bottom: 24.45%;

    margin:auto;

    top: 0; left: 0; bottom: 0; right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side {
    width: 17.57%;
    padding-bottom: 17.57%;
}

.left{
    left:3%;
}

.right{
    left:-3%;
}

.boxWrap{
    float: left;
    position: relative;
    width: 11.49%;

    margin:auto;
    padding:0;

    top: 0; left: 0; bottom: 0; right: 0;
}

.leftUp, .leftDown, .rightUp, .rightDown{
    width: 100%;
    padding-bottom:100%;
    position:relative;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.leftUp, .leftDown{
    margin-left:7%;
}

.rightUp, .rightDown{
    margin-left:-7%;
}

.leftDown, .rightDown{
    margin-top:38%;
}

.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;

    margin:0;
    padding:0;

    background-size:cover;
    background-repeat: no-repeat;
}

.innerLeft{
    background-image:url('../images/home_links.png');
}
.innerMiddle{
    background-image:url('../images/home_midden.png');
}
.innerRight{
    background-image:url('../images/home_rechts.png');
}

.innerLeftUp{
    background-image:url('../images/home_linksB.png');
}
.innerLeftDown{
    background-image:url('../images/home_linksO.png');
}
.innerRightUp{
    background-image:url('../images/home_rechtsB.png');
}
.innerRightDown{
    background-image:url('../images/home_rechtsO.png');
}

.overlay{
    height:100%;
    z-index:2;
    overflow:hidden;
    margin:0;
    padding:0;
}

.blue{
    background: rgba(0,101,147,0.40);
}

.blue:hover{
    background: rgba(185,185,185,0.40);
}

.hover:hover{
    background: rgba(245,245,245,0.40);
}

.blue:active, .hover:active{
    background: rgba(178,46,47,0.40);
}

Answer 1

I placed the decorative images inside the center .box element and straightened them by giving them the opposite rotation to their parent, i.e. rotate:-45deg.

The main problem with this approach is that elements rotate about their centre and the location of the centre depends on the element's width. In responsive designs, this means that the location of the centre depends on the page width i.e. it can move.

To counter this, I placed 2 wrapper elements around the image. The outer wrapper (.straight) is given a width of 1%. This makes it narrow enough that slight changes in its width don't noticeably affect the positioning of its contents. This outer wrapper is then rotated by -45deg.

The inner wrapper (.straight div) has a width of 10,000%. This gives the inner wrapper a width equal to the width of the .box element (1% x 10000% = 100%). The decorative image can then be placed in this image wrapper and sized, positioned etc... as normal.

I did this twice, once for the top image and once for the bottom image. The css for the top image is here, the bottom image was positioned similarly:

.straight{
  color:white;
  position:absolute;
  width:1%;
  height:1%;
  -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align:center;
}
.straight.top div{
  width:10000%;
  left:-5000%;
  top:-2000%;
  position:relative;
}

http://jsfiddle.net/John_C/8kFkR/