Add background-rotate property that we just have to rotate the background without affecting the text and only one layer

[piaoxuelia]

I want to make an animation like this, the background keeps rotating at a constant speed，but now，
I must have three layers, the cyan layer, the rotating translucent background layer and the text .

the background-rotate property can resolve this problem, only one layer is ok.

[piaoxuelia]

We can do this animation using CSS-animation to control the rotation speed，background-rotate to control the angle of the background.

[inoas]

Background rotation must define if clipping happens or not?

[upsuper]

There was a property defined in css-logical for rotating background image called background-image-transform, but it was for a different use case and has been removed recently.

If we want to add the property for this use case, we may still want to call it background-image-transform and probably allow it to accept the same syntax as transform. Considering background-image is a list of images, this property may want to be a list as well.

[bradkemper]

With the existing background properties, you wouldn’t really need scale() or translate(). Personally, I don’t think skew() or matrix() would be anywhere near as useful as rotate. So I’d be happy with background-rotate.

I think the whole tile should rotate around it’s center, without changing where the center of other tiles are: background-size would only be based on un-rotated images. Thus, corners might overlap a little when rotated.

[Loirooriol]

#4706 was analogous, it proposed a background-filter property, but it was rejected in favor of filter().

For consistency, maybe CSS Transforms should define a transform() or rotate() function that can be used anywhere an <image> is expected, rather than adding more background-* properties. Like

background-image: transform(url(background.jpg), rotate(180deg));

This would allow to transform images not just for backgrounds but also for things like border images or maybe cursors.

[leandroruel]

in cases where we have backgrounds that we desire to rotate, we have to rotate the whole element through css transforms, but if we want add it to a element, would be great if we could add a property: background-rotate so we can rotate the whole bg image easily like:

<style>
   body {
     background-image: url(pattern.png);
     background-repeat: repeat-y;
     background-rotate: 180deg;
  }
</style>

this will avoid have to rotate the element and instead we only rotate the background.

also, about the comment of @Loirooriol i think a new property is still valid for specific cases, where if any developer needs add the property with javascript.

[SebastianZ]

also, about the comment of @Loirooriol i think a new property is still valid for specific cases, where if any developer needs add the property with javascript.

Manipulation via JavaScript is also possible with @Loirooriol's suggested solution, but it is more cumbersome if you just want to rotate the background image.
Though adding a transform() function also has two big advantages. It can be used everywhere where images are allowed and you can apply more transformations than just rotations.

Sebastian

[SebastianZ]

For reference, in #6807 a more general solution for image manipulations is discussed which covers this use case but goes far beyond the possibilities of a transform() function.

Sebastian

[LeaVerou]

Since there was no response by the OP and this is was a primary use case for @image, let’s close this too. @piaoxuelia feel free to comment if you disagree.