How to Apply CSS3 Transforms to Background Images

CSS transformations are nice, however they don’t (but?) apply to background pictures. This text presents a workaround for these instances once you actually do wish to rotate a background picture, or to maintain a background picture mounted whereas its container aspect is rotated.

For extra superior CSS data like this, try our guide CSS Master, 3rd Edition.

Scaling, Skewing and Rotating Components

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

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

Nice stuff. Nevertheless, this rotates the entire aspect — its content material, border and background picture. What in the event you solely wish to rotate the background picture? Or what in order for you the background to stay mounted 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 wish to use related results in the present day.

One possibility can be to create a brand new background picture from the unique, say rotated by 45 levels. This might be achieved utilizing:

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

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

Thankfully, there’s a CSS-based answer. In essence, it’s a hack which applies the background picture to a ::earlier than or ::after pseudo aspect moderately than the mother or father container. The pseudo aspect can then be reworked independently of the content material.

Reworking the Background Solely

The container aspect can have any kinds utilized, however it should be set to place: relative, since our pseudo aspect can be positioned inside it. You must also set overflow: hidden except you’re completely satisfied 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 aspect with a reworked background. The z-index is ready to -1 to make sure it seems beneath 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);
}

Observe that you could be want to regulate the pseudo aspect’s width, top and place. For instance, in the event 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 mother or father container are utilized to pseudo parts. Due to this fact, 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 unique 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 mother or father container.

Listed below are the related demos reside on CodePen.

The consequences 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 Tips on how to Rotate Background Picture CSS

Let’s finish by taking a look at some regularly requested questions on rotating background pictures with CSS.