How to Apply CSS3 Transforms to Background Images

Share this article

How to Apply CSS3 Transforms to Background Images

CSS transformations are great, but they don’t (yet?) apply to background images. This article presents a workaround for those times when you really do want to rotate a background image, or to keep a background image fixed while its container element is rotated.

For more advanced CSS knowledge like this, check out our book CSS Master, 3rd Edition.

Table of Contents

Key Takeaways

  1. CSS Transformations and Background Images: While CSS transformations can rotate, scale, or skew elements, they don’t apply to background images. This article presents effective workarounds for manipulating background images, like rotating them independently of their container or fixing them while the container is rotated.

  2. Creative Use of Pseudo Elements: The key technique involves using ::before or ::after pseudo-elements to achieve background transformations. By applying the background image to a pseudo-element, you can then transform it independently, offering more flexibility in design without additional server-side or client-side processing.

  3. Practical Examples and Browser Compatibility: The article provides practical CSS code examples demonstrating how to implement these techniques, along with live demos on CodePen for a hands-on understanding. Additionally, it assures compatibility with all major browsers, including Internet Explorer 9, ensuring broad audience reach.

Scaling, Skewing and Rotating Elements

Scaling, skewing, and rotating any element is possible with the CSS3 transform property. It’s supported in all modern browsers without vendor prefixes:

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

Great stuff. However, this rotates the whole element — its content, border and background image. What if you only want to rotate the background image? Or what if you want the background to remain fixed while the content is rotated?

There’s no W3C CSS proposal for background-image transformations. It would be incredibly useful, so perhaps one will appear eventually, but that doesn’t help developers who want to use similar effects today.

One option would be to create a new background image from the original, say rotated by 45 degrees. This could be achieved using:

  1. a server-side image manipulation process
  2. a client-side canvas-based image handling code, or
  3. APIs provided by some image-hosting CDN services.

But all these require additional effort, processing, and costs.

Fortunately, there’s a CSS-based solution. In essence, it’s a hack which applies the background image to a ::before or ::after pseudo element rather than the parent container. The pseudo element can then be transformed independently of the content.

Transforming the Background Only

The container element can have any styles applied, but it must be set to position: relative, since our pseudo element will be positioned within it. You should also set overflow: hidden unless you’re happy for the background to spill out beyond the confines of the container:

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

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

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

Note that you may need to adjust the pseudo element’s width, height and position. For example, if you’re using a repeated image, a rotated area must be larger than its container to fully cover the background.

CSS3 transformation on background

Fixing the Background on a Transformed Element

All transforms on the parent container are applied to pseudo elements. Therefore, we need to undo that transformation. For example, if the container is rotated by 30 degrees, the background must be rotated -30 degrees to return to its original position:

#myelement {
  position: relative;
  overflow: hidden;
  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;
  transform: rotate(-30deg);
}

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

Here are the relevant demos live on CodePen.

The effects work in all major browsers and Internet Explorer back to version 9. Older browsers are unlikely to show transformations but the background should still appear.

FAQs on How to Rotate Background Image CSS

Let’s end by looking at some frequently asked questions about rotating background images with CSS.

Can you rotate background image in CSS?

Technically, you can’t. There’s currently no W3C CSS proposal for background-image transformations on the horizon. However, you can quite easily “fake it”! All you have to do is create a pseudo-element, attach the image to that instead, and then apply desired transforms to the pseudo-element. The result if visually the same, even if you had to be creative about it.

How can you rotate a background image in a container?

The easy way to rotate a background image is to place it in a pseudo-element and rotate that instead. You do this with CSS3 transform property, such as transform: rotate(30deg) to rotate a pseudo-element holding the background image. The container must have position: relative, and the pseudo-element must be set to position: absolute for this to work.

How do I rotate an image 90 degrees in CSS?

You can easily rotate an image 90 degrees in CSS with the CSS transform property. It’s as simple as doing this: transform: rotate(90deg). You rotate it in the other direction with transform: rotate(-90deg), or transform: rotate(270deg). You can do the same for background images with our clever pseudo-element hack.

What is rotate() in CSS?

The rotate() function in CSS is one of several options available with CSS Transforms. The rotate() function serves to spin an element around a fixed point, known as the transform origin, which is the center of the element by default.

What is the CSS3 transform property and how does it work?

The CSS3 transform property allows you to modify the coordinate space of the CSS visual formatting model. It’s a powerful tool that lets you rotate, scale, skew, or translate an element. It modifies the element in the 2D or 3D space. For instance, the rotate function can be used to rotate an element clockwise or counterclockwise, and the scale function can be used to change the size of an element.

How can I rotate a background image using CSS3?

To rotate a background image, you can use the CSS3 transform property. However, it’s important to note that the transform property applies to the element itself, not just the background image. If you want to rotate only the background image, you’ll need to use a pseudo-element like ::before or ::after, apply the background image to it, and then rotate that pseudo-element.

Can I rotate a background image without rotating the content?

Yes, you can rotate a background image without affecting the content of the element. This can be achieved by using a pseudo-element like ::before or ::after. You apply the background image to the pseudo-element and then rotate it. This way, the rotation will not affect the actual content of the element.

How can I animate the rotation of a background image?

To animate the rotation of a background image, you can use CSS3 animations or transitions in combination with the transform property. You can define keyframes for the animation, specifying the rotation at different points in time. Alternatively, you can use a transition to smoothly change the rotation over a specified duration.

Why is my rotated background image getting cut off?

When you rotate an element, it might get cut off if it exceeds the boundaries of its parent element. To prevent this, you can use the overflow property on the parent element and set it to visible. This will ensure that the rotated element is fully visible.

Can I use the CSS3 transform property in all browsers?

The CSS3 transform property is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, for older versions of Internet Explorer (9 and below), you need to use the -ms- prefix. It’s always a good practice to include vendor prefixes for maximum compatibility.

How can I rotate a background image at a specific angle?

You can specify the angle of rotation in the rotate function of the transform property. The angle is specified in degrees, with positive values for clockwise rotation and negative values for counterclockwise rotation. For example, transform: rotate(45deg) will rotate the element 45 degrees clockwise.

Can I rotate a background image around a specific point?

Yes, you can rotate an element around a specific point using the transform-origin property. By default, the element is rotated around its center. But you can change this by setting the transform-origin property to a different value.

Can I combine multiple transformations on a single element?

Yes, you can apply multiple transformations to a single element by specifying multiple functions in the transform property. The functions are applied in the order they are listed. For example, you can rotate and scale an element at the same time using transform: rotate(45deg) scale(2).

How can I reverse a transformation?

You can reverse a transformation by applying the inverse of the transformation. For example, if you have rotated an element 45 degrees clockwise, you can reverse this by rotating it 45 degrees counterclockwise. Alternatively, you can use the CSS3 animation or transition to animate the transformation in reverse.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

backgroundCSSCSS3css3 transformslearn-advanced-csstransformations
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form