Blogging Tips

CSS: rotate background images

We can use CSS to rotate elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a background image, without rotating the container.
Hmmm... that was a question, but the answer surprised me when I found how to do it.
Are you interested? Well, get into the article and see how to do it.

The basics
As said, we can rotate a container using transform: rotate. Just consider that you element has a class="myContainer". We can rotate it by using a rule like:

.myContainer
{
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

With the above we rotate the container by 30 degrees.

To rotate or not to rotate?
We can now consider the above and decide to rotate only the background image inside the container, or to rotate the container but not the image inside it.
Ah! Is it possible? Yes, it is.

Let's see how to rotate the image but not the container.
Considering the above container (class="mycontainer") we can apply any rule to it, but we have to position it in a relative way and hide the overflow.

.myContainer
{
  position: relative;
  overflow: hidden;
}

Now we need to create a pseudo element, position it absolutely with a transformed background:

.myContainer:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(bckImage.jpg) 0 0 repeat;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

Note that we need to set the z-index to -1 in order to make it appear below the container.

What about a fixed background with a rotated container?
We need a pseudo element again. But first we need to rotate the container:

.myContainer
{
    position: relative;
    overflow: hidden;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

Ok. Now we use the pseudo element and we "counter-rotate" the background. Ah! That's the trick!

.myContainer:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(bckImage.jpg) 0 0 repeat;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

And that's it.

Compatibility?
All the above works perfectly in IE9, Firefox, Chrome, Safari and Opera. We have little trouble with IE8: the transformation is not working, but the background will appear.IE6 and IE7 don't know anything about pseudo elements, so nothing will be applied.

Let me know what you think about the examples, as usual, using the comments section below.