0

I'm trying to create a rotated container, which can accept a background image.

The thing is, I'm trying to keep the original image proportions, so the image isn't skewed, but only cropped.

Here's a fiddle I've set up: 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;}

There's a colored container which is working perfectly, but with the image it wouldn't rotate correctly.

I'd appreciate any help!

tlt2w
  • 321
  • 1
  • 5
  • 17

1 Answers1

1

You need to apply the transform on the img tag. Also, you have two #container divs, id should be unique. PS: You need to remove overflow hidden from the backstretch div, in order to have the skewed container visible on the bottom part of the image.

Alex Macra
  • 177
  • 8
  • Hi, yeah sorry for the double IDs, didn't see that. Anyhow, it's not really affecting the outcome. By applying a transformation on the image tag it would not be in the original ratio anymore. – tlt2w May 14 '15 at 13:49