How to Apply CSS3 Transforms to Background Images — SitePoint

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.
What if you only want to rotate the background image?
One option would be to create a new background image from the original, say rotated by 45 degrees.
In essence, it’s a hack which applies the background image to a ::before or ::after pseudo element rather than the parent container.
Here are the relevant demos live on CodePen:See the PenCSS3 Transforms on Background Images by SitePoint (@SitePoint)on CodePen.

sitepoint Member since June 14, 2020

Loading + Follow Following

Learn Web Design & Development with SitePoint tutorials, courses and books - HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design