Blending section dividers with image background

Connor Olson

• May 16, 2024 16:50

I have two sections with a background image, and I want to be able to use a section divider (e.g. ). However, I only see the option to include a color, so when I add the divider, there's some random color in-between the sections (https://share.zight.com/2Nu8XgrO). Is it possible to move up the lower section to blend into the divider? I've tried to use a negative margin to move the lower section up, however, it either goes in front or behind the top section (depending on what the Z-index is set to) (https://share.zight.com/L1ub7LJ6). Any ideas to make this happen?

0

• 

  Ariel H.

  • May 16, 2024 18:52

  Hi Connor,

  Thank you for contacting us.

  About your request to blend the background images of the two sections using a shape divider.  I regret to inform you that the shape dividers available in Brizy are limited to solid colors. As a result, it may be challenging to achieve a seamless blend between the images.

  However, I have a suggestion that may help you achieve the desired design effect. You can create a transparent PNG image that mimics the design of the shape divider you had in mind. Then, you can layer this transparent image on top of the second section's background image. By using negative top margins, you can position the second section below the first section, using a lower z-index value.

  To further demonstrate this this approach, I have prepared an example for you in this screencast:https://youtu.be/96W9CpZ8v24
  I hope this helps in achieving the design you want for your page.

  If you have any further questions or need additional assistance, please don't hesitate to reach out. 

  Best regards,
  Ariel H.

  0

Please sign in to leave a comment.