Custom CSS background

Hello there!

We have created a website where there is a custom css background with linear gradient and mix blend mode.

As you can see at the screenshot, the background is not properly sticked to the div. I tried to use background-position property with value inherit and thought it will get the values from the div and will perfectly size and position the background, however, this did not happen.

Can you help me with the positioning?

Thank you!


Here is my site Read-Only: https://preview.webflow.com/preview/business-synergy?utm_medium=preview_link&utm_source=designer&utm_content=business-synergy&preview=78fcd965c99e1b18c083979a9c110764&workflow=preview

Hi @daniel2, Thanks for the post, I was taking a look but could not reproduce the trouble, have you been able to already resolve the issue or did you take another approach?

.cyberdave

Hello @cyberdave, I have the custom css code in brackets because I had to publish the site. However, it is still unsolved.

@cyberdave Hello, do you have any idea to fix this?

Hi @daniel2, I was doing some additional testing and it seems there is a max width of 70% set on the div block 27, when I remove that max width so that it is set to the default, then the blend mode renders fine with correct positioning using the custom code on your page.

See the max width to remove:

Shared with CloudApp

I would try that next, after removing max width, then republish the site.

Here is what it looks like for me in Test:

Shared with CloudApp

I hope this helps, let me know if there is still trouble after making that change and republishing.