Trying to set up a rotated container that can display a background image while maintaining the original proportions without skewing it, only cropping.
Referencing the following code snippet: http://jsfiddle.net/RyU9W/38/
HTML:
<div id="container" class="color-container">
<p>Colored Container</p>
</div>
<div class="sep"></div><div class="sep"></div>
<div id="container" class="image-container">
<p>Image Container</p>
</div>CSS:
p {padding: 250px 0;}
.sep {margin: 250px 0;}
#container {
background:none;
position:relative;
}
#container:before {
content: "";
position:absolute;
display:block;
width:100%;
height:100%;
padding: 100px 0;
z-index:-1;
-webkit-transform: skew(0deg, 4deg) translateZ(0);
transform: skew(0deg, 4deg) translateZ(0);
}
.color-container:before {
background: royalblue;
}The colored container is functioning correctly, but encountering issues with rotating the image container as intended. Seeking guidance on how to resolve this challenge.
Any assistance would be greatly appreciated!