-
Hi team,
I am creating a fairly complex Home Page Banner and need to add an extra layer which allows me to place another background image / effect on the far left of the banner and another on the far right of the banner. What is my best approach, without breaking the current layout?
Thanks
-
Hi there,
You can place both images inside the banner section container and set their position to absolute. Then adjust the inset values to position them precisely.
These controls are available in the Layout panel in V2, but since you’re using the V1 blocks, you’ll need to apply custom CSS to achieve the same positioning.
-
Hey Alvind, sorry for the delay getting back on this one.
So I have turned off V1 and tried adding an image using v2 into the Hero Section which is also V2. I tried two images, one for left and one for right, but have no idea how to make this work. So instead I have found one large image to cover the entire background. When I add the image of course it covers my previous layout, so how do I set this image to the background, so I can use it as an effect? -
Try this:
Select the Hero section container and set its Position to Relative.
Then select the Image block, set its Position to Absolute, and set all Inset values to 0.
Let me know if that works!
-
Hey Alvind,
I think I am getting somewhere. I’m pretty happy with the layout now (at least on desktop), but as you will see, I have some vertical lines on the right-hand side of the banner. I want to fade these back or add some opacity to the image, so that is way more subtle. I’ve tried adding a gradient over it, but that didn’t work. How can I control this images opacity or make it more faint?
Thanks -
You can select the Image block, then go to Effects > Opacity and set it to something like 20%.
-
Awesome, that works thanks
-
Glad to hear that! 🙂
- You must be logged in to reply to this topic.