Solution for applying CSS3 transforms to background images

CSS transformations, while cool, have not yet been applied to background images. This post provides a good workaround for when you really want to rotate a background image, or keep the background image constant when the container element rotates.

Use CSS3 transform properties to scale, skew, and rotate any element. It is supported in all modern browsers without vendor prefixes. (I've added -webkit- in case you want to support some older browsers.)

#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

Great stuff. However, this rotates the entire element - its content, borders, and background image. What if you only want to rotate the background image? Or if you want the background to remain constant when the element rotates

Currently, there is no W3C recommendation for background image transitions. This would be very useful, so I suspect there will be one eventually, but it won't help developers who want to use a similar effect today.

Fortunately, there is a solution. Essentially, this is a hack to apply the background image to the before or after pseudo-element, rather than the parent container. The pseudo-elements can then be transformed independently.

Convert only the background

The container element can have any styles applied to it, but it must be set to position:relative since our pseudo-element will be positioned within that element. You should also set overflow:hidden unless you are willing to have the background overflow outside of the container.

#myelement {
position: relative;
overflow: hidden;
}

We can now create an absolutely positioned pseudo-element with a transition background. The z-index is set to -1 to ensure it appears below the container content.

#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

Note that you may need to adjust the width, height, and position of the pseudo-element. For example, if you are using a repeating image, the rotated area must be larger than its container to completely cover the background:

Fixed background on transition element

Fixed background of transformed elements. All transformations on the parent container are applied to the pseudo-element. Therefore, we need to undo that transformation, for example, if the container is rotated 30 degrees, we have to rotate the background -30 degrees to get back to the fixed position:

#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);

Again, you'll need to adjust the size and position to ensure the background adequately covers the parent container.

The effect works in all major browsers, reverting to version 9 in both Edge and Internet Explorer. IE8 will not show any transition, but will still show the background.

Summarize

The above is the solution for applying CSS3 transforms to background images that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!