Rotating Background Image Within Div

Design help General
1

Hi Is there any way to rotate the background image within a div directly in Webflow’s designer?

The reason being I am looking to have a diamond with rounded corners as an image mask. I have added rounded corners to the div, rotated it 45 degrees and added a background image, this also rotates the background image which I don’t want. I want the image to be 0 degrees.

Any help will be appreciated.

Scott

Here is my site Read-Only: https://preview.webflow.com/preview/emtec-hero?utm_medium=preview_link&utm_source=dashboard&utm_content=emtec-hero&preview=9041853c5a485342a01ed900c46f5183&mode=preview

1 Like
2

Hi @scottalexwatson You cannot rotate background image, but you can add a new image inside the div block with position: absolute.

image
image1919×865 301 KB

Make sure your div block is position: relative:

image
image1919×866 302 KB

and rotate this image too (-45):

image
image1919×858 290 KB

And then you can adjust size and margins to fit the image on this div block.

image
image1919×862 304 KB

I don’t know if is not better to use just an image manipulated on photoshop, because if you add some content inside this block will be rotated too.

I hope it helps you :wink:

Cheers,
Eve Kayser

3

Hi Eve,

This works perfect. Thanks so much!

1 Like