How to Keep Background Image Position Fixed When Rotating a Container in CSS?

Preserving Image Position During Container Rotation

In web development, rotating container background images without affecting their content can be a challenging task. When applying transform rotations to containers, the image content often follows suit. To address this, let's explore a solution that keeps the image content in its original position.

Background Image Rotation with CSS Transforms

Consider the following CSS, which attempts to rotate the background image of a vertical scrollbar decrement button:

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    ...
}

Unfortunately, this approach rotates both the image and its content. To prevent this, refer to the article linked below for a comprehensive solution:

• [http://www.sitepoint.com/css3-transform-background-image/](http://www.sitepoint.com/css3-transform-background-image/)

Solution: Pseudo-Element with Reversed Rotation

The provided solution uses a pseudo-element to create a virtual image layer and applies a reversed rotation to it:

#myelement:before {
    content: "";
    ...
    background: url(background.png) 0 0 repeat;
    transform: rotate(-30deg);
}

This method essentially offsets the rotation of the container, leaving the image content in place. Note that you may need to adjust the rotation angle and other values to achieve the desired result for your specific design.

The above is the detailed content of How to Keep Background Image Position Fixed When Rotating a Container in CSS?. For more information, please follow other related articles on the PHP Chinese website!