CSS transformations are nice, however they don’t (but?) apply to background photographs. This text presents a workaround for these instances while you actually do need to rotate a background picture, or to maintain a background picture fastened whereas its container ingredient is rotated.

For extra superior CSS data like this, try our e-book CSS Grasp, third Version.

Scaling, Skewing and Rotating Parts

Scaling, skewing, and rotating any ingredient is feasible with the CSS3 rework property. It’s supported in all trendy browsers with out vendor prefixes:

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

Nice stuff. Nonetheless, this rotates the entire ingredient — its content material, border and background picture. What should you solely need to rotate the background picture? Or what in order for you the background to stay fastened whereas the content material is rotated?

There’s no W3C CSS proposal for background-image transformations. It will be extremely helpful, so maybe one will seem finally, however that doesn’t assist builders who need to use related results at present.

One choice could be to create a brand new background picture from the unique, say rotated by 45 levels. This may very well be achieved utilizing:

1. a server-side picture manipulation course of
2. a client-side canvas-based picture dealing with code, or
3. APIs offered by some image-hosting CDN companies.

However all these require extra effort, processing, and prices.

Fortuitously, there’s a CSS-based answer. In essence, it’s a hack which applies the background picture to a ::earlier than or ::after pseudo ingredient quite than the dad or mum container. The pseudo ingredient can then be reworked independently of the content material.

Reworking the Background Solely

The container ingredient can have any kinds utilized, however it should be set to place: relative, since our pseudo ingredient will probably be positioned inside it. You also needs to set overflow: hidden except you’re completely happy for the background to spill out past the confines of the container:

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

We will now create a completely positioned pseudo ingredient with a reworked background. The z-index is ready to -1 to make sure it seems under the container’s content material:

#myelement::earlier than {
  content material: "";
  place: absolute;
  width: 200%;
  top: 200%;
  prime: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  rework: rotate(30deg);
}

Be aware that you could be want to regulate the pseudo ingredient’s width, top and place. For instance, should you’re utilizing a repeated picture, a rotated space should be bigger than its container to completely cowl the background.

Fixing the Background on a Reworked Ingredient

All transforms on the dad or mum container are utilized to pseudo components. Subsequently, we have to undo that transformation. For instance, if the container is rotated by 30 levels, the background should be rotated -30 levels to return to its authentic place:

#myelement {
  place: relative;
  overflow: hidden;
  rework: rotate(30deg);
}

#myelement::earlier than {
  content material: "";
  place: absolute;
  width: 200%;
  top: 200%;
  prime: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  rework: rotate(-30deg);
}

Once more, you’ll want to regulate the scale and place to make sure the background adequately covers the dad or mum container.

Listed here are the related demos reside on CodePen.

The results work in all main browsers and Web Explorer again to model 9. Older browsers are unlikely to indicate transformations however the background ought to nonetheless seem.

FAQs on How one can Rotate Background Picture CSS

Let’s finish by some continuously requested questions on rotating background photographs with CSS.