Html + Css: How to create a auto-resizing rotated background? - html

Question

image a complete black web page. On this web page is a 100% size white div that fills the whole page. I'd like to rotate this div by -7 degrees (or 7 degrees counter-clock wise).
This will result in the black background being visible in triangles on the edges, just like you had placed a piece of paper on a desk and turned it a bit to the left.
Actually this can be done with some css and it's working quite well (except for IE).
The real problem now is:
I'd like to have a normal, non-rotated div element on top of that to display the content in, so that only the background is rotated.
Rotating a contained div counterwise doesn't work though, because through the two transformations the text will be blurry in all browsers.
How can I realize that?
Best would be a solution workiing in current Webkit browsers, FF3.5+ and IE7+. If only IE8+ I could live with that too.

Answer 1

Try using
#content {
position: absolute;
z-index: 500;
margin-left: auto;
margin-right: auto;
}
#background {
//Your white DIV
}
<div id="background"></div>
<div id="content">
Lorem ipsum
</div>

Answer 2

Use position:absolute; on the background and z-index it to the back.
Here is an example.

Answer 3

You have to rotate it back... http://jsfiddle.net/gFCHE/
Not blurry at all on Chrome or ChromeOS. It shouldn't be anywhere else either.
Add overflow:hidden to #crooked for a cool effect with images.
This CSS will work to get you started but you'll need to tweak it to work as you want it.
<div id='wrap'>
<div id='cooked'>
<div id='straight'>
</div>
</div>
</div>
#wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
color:#f00;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
background:#fff;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
#straight{
-moz-transform: rotate(7.0deg); /* FF3.5+ */
-o-transform: rotate(7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(7.0deg); /* IE9 */
transform: rotate(7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;