Find out how to Apply CSS3 Transforms to Background Photos

CSS transformations are actually cool, however they don’t but apply to background photos. This text presents a neat workaround for these occasions while you actually do need to rotate a background picture, or to maintain a background picture fastened whereas its container factor is rotate.

This text was up to date in 2018.

Eager about mastering CSS3 like a professional? CSS Grasp, by Tiffany Brown, is out there for obtain to all SitePoint Premium members. Alternatively, you may seize your copy of the e-book for simply $19.

Scaling, skewing and rotating any factor is feasible with the CSS3 remodel property. It’s supported in all fashionable browsers with out vendor prefixes. (I’ve added within the -webkit- simply in case you need to help some older browsers.)

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

Nice stuff. Nevertheless, this rotates the entire factor — its content material, border and background picture. What if you happen to solely need to rotate the background picture? Or what if you would like the background to stay fastened whereas the factor is rotated?

Presently, there’s no W3C proposal for background-image transformations. It might be extremely helpful, so I believe one will seem finally, however that doesn’t assist builders who need to use comparable results immediately.

Fortuitously, there’s a resolution. In essence, it’s a hack which applies the background picture to a earlier than or after pseudo factor slightly than the dad or mum container. The pseudo factor can then be reworked independently.

Remodeling the Background Solely

The container factor can have any types utilized, nevertheless it should be set to place: relative, since our pseudo factor can be positioned inside it. You also needs to set overflow: hidden except you’re glad for the background to spill out past the container.

#myelement  place: relative; overflow: hidden;

We will now create an absolutely-positioned pseudo factor 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 

Observe it’s possible you’ll want to regulate the pseudo factor’s width, peak and place. For instance, if you happen to’re utilizing a repeated picture, a rotated space should be bigger than its container to totally 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, e.g. if the container is rotated by 30 levels, the background should be rotated -30 levels to return to a hard and fast place:

#myelement  #myelement:earlier than  content material: ""; place: absolute; width: 200%; peak: 200%; prime: -50%; left: -50%; z-index: -1; background: url(background.png) zero zero repeat; -webkit-transform: rotate(-30deg); remodel: 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.

The results work in all main browsers and in Edge and Web Explorer again to model 9. IE8 is not going to present any transformations however the background nonetheless seems.