How to place a div on top of a sensitive rotating div?

Question

I am trying to get this design:

but I have problems with the logo and twists, I don’t know how to add them. I tried with absolute positioning, but when resizing the website, the logo and curls end up somewhere other than the squares of the images.

How to add curls and logo?

JSFiddle: http://jsfiddle.net/uHsJv/1/
When you want to edit the JS script, in the image folder on my site you can find the following images:
- logo (images / logo.png or images / logogroot.png)
- two vortices on top, including the logo (images / boven.png)
- two vortices at the bottom (images / onder.png)
- full 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 of the .box and straightened them, giving them the opposite rotation to their parents, i.e. rotate: -45deg.

The main problem with this approach is that the elements rotate around their center, and the location of the center depends on the width of the element. In adaptive designs, this means that the location of the center depends on the width of the page, that is, it can move.

To counter this, I placed 2 wrapping elements around the image. The outer wrapper (.straight) is 1% wide. This makes it narrow enough that minor changes in its width do not have a noticeable effect on the positioning of its contents. Then this outer shell is rotated by -45deg.

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

I did this twice, once for the top image and once for the bottom image. Css for the top image is here, the bottom image was located 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/