Thursday 4 April 2013

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.

6 comments:

  1. Hi,

    I need some help to get my background to spin like the one on this website http://favethemes.com/demo/landlr/turquoise.html

    The background I want to spin like that is on my site here http://spacemuziq.com - can this be done?

    Your help would be much appreciated.

    Byond Borg

    ReplyDelete
  2. Your code snippets are suspiciously similar (by which I mean, they are basically identical) to the ones in this article, posted about 6 months before yours: http://www.sitepoint.com/css3-transform-background-image/

    Even the text you've used to describe your code is like a reworded version of the other article. For example, you say:

    "create a pseudo element, position it absolutely with a transformed background"

    ...while they say...

    "create an absolutely-positioned pseudo element with a transformed background"

    I'd be tempted to call this plagiarism.

    ReplyDelete
    Replies
    1. Call what you prefer :-)
      I don't think I saw that article, but usually when I got ideas from somewhere else I used to mention it. To much time on my hands now, and honestly I don't care.
      If someone feels offended I will delete the post.

      Delete
  3. Excellent!!!

    ReplyDelete
  4. when people try to help others, there's always that 1 guy...

    ReplyDelete
  5. Hi;

    I have come across this page via a google search and this was at the top of the results

    My Question:
    Can you rotate multiple background images to 1 element

    Real life scenario:
    I have developed a game of Battleships, the elements that contain a ship, have to display a ship which can be either appear Horizontally or Vertically.

    behind the ship image, is the Sea graphic, which contains wave markings
    problem with this is if the ship is horizontal, it changes the sea graphic to be rotated 90*, which affects the sea background pattern

    Can I seperate it so that 1 single HTML Element, has 2 background images, but 1 is rotated 90* whilst the other remains unaffected

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.