As a design element of my site I would like to have a curved shape as the background of a row.Unfortunately, I did not succeed in implementing it properly.
The effect I am looking for is the "design example" image.
I tried to do the following.
Create an image with the curved shape
Save it as PNG with transparency
Set it as a background image of the row.
​I would expect that it takes the image as the background and the background color for the transparent spaces. However , as shown in the example, the part of image which is transparent appears white. Although you could make a nontransparent image where you add the same background color as the row above and save it as a JPEG (that might work in this example), this would not work when applying the same effect when the row above has an image background, and you would like to curve the underlying shape on top of it.
Can someone help me out and tell how we can do this? Thanks in advance.
I added the class "neg-top-margin" to the row with the image and then created the relevant rule for it in your custom css box in the salient options panel.
Hi,
As a design element of my site I would like to have a curved shape as the background of a row.Unfortunately, I did not succeed in implementing it properly.
The effect I am looking for is the "design example" image.
I tried to do the following.
​I would expect that it takes the image as the background and the background color for the transparent spaces. However , as shown in the example, the part of image which is transparent appears white. Although you could make a nontransparent image where you add the same background color as the row above and save it as a JPEG (that might work in this example), this would not work when applying the same effect when the row above has an image background, and you would like to curve the underlying shape on top of it.
Can someone help me out and tell how we can do this? Thanks in advance.
Hey Ralph, would you be able to supply me a login to your site so I can check everything out and try to set it up for you?
Cheers :)
Hey again!
I just completed the effect for you :)
I added the class "neg-top-margin" to the row with the image and then created the relevant rule for it in your custom css box in the salient options panel.
Cheers!
That worked for me, thank you very much!
I marked the topic as 'resolved'