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.

Comments to: How to Apply CSS3 Transforms to Background Images — SitePoint

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

Login

Welcome to Typer

Brief and amiable onboarding is the first thing a new user sees in the theme.
Join Typer
Registration is closed.