How to Rotate a Background Image in CSS without Rotating its Content?

Rotating a Background Image within a Container without Affecting Content

When it comes to styling website components, one common element is the scrollbar. For a more visually appealing design, you may want to customize the scrollbar elements. However, rotating the background image on a scrollbar may not always behave as expected.

In Chrome, rotating the background image may also rotate the content inside it. If you wish to rotate the image without rotating its content, here's a potential solution:

An effective solution to this issue is presented at http://www.sitepoint.com/css3-transform-background-image/:

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

This code creates a pseudo-element using the :before selector. It absolutely positions a transparent box with dimensions twice the size of its parent element and centers it within the parent. The background image is then applied to this pseudo-element, ensuring that it rotates independently of the actual content.

The above is the detailed content of How to Rotate a Background Image in CSS without Rotating its Content?. For more information, please follow other related articles on the PHP Chinese website!