Rotate background images for slanted tiled effect

[dcmaia (Daniel)]

Hey everyone,

The what I’m trying to achieve is pretty self-explanatory I’d say. The how is really the question. I know you can have divs with a background image, and you can tile them to your heart’s content. Like this:

But once the background image is tiled, is there a way to rotate the tiling independently from the div, while still keeping it clipped to it? Like this:

That way, you could have something like this:

I could simply created a pre-tiled and pre-slanted image and use that as the background image… but, what if we like it more or less slanted? Then we have to export a brand new image every time. It’s something I’d like to avoid, but if it’s inevitable…

Cheers!

[webdev (Jeff Selser)]

Hi @dcmaia - Welcome. It’s always a good ideas to search SE’s before posting. First result for “transform background image” in duck duck go is this article in sitepoint. Should be a match.

How to Apply CSS3 Transforms to Background Images - SitePoint

[dcmaia (Daniel)]

Hey Jeff, thanks for this. So you’re saying there’s no way of doing this without custom code?

[webdev (Jeff Selser)]

@dcmaia

So you’re saying there’s no way of doing this without custom code?

Yes that is correct, since pseudo-elements are not supported in the designer.

[dcmaia (Daniel)]

Ah I see. That’s too bad. My question was whether I could do it with Webflow (i.e without custom code). I should’ve been more clear.

Well, that solves it! Thank you!