Okay
  Public Ticket #3406757
Adding a background element
Closed

Comments

  •  16
    Soluforyou started the conversation

    Hi there. Is it possible to add PNG in the background to the side, just like this photoshopped example? See the example image below.

    Note I already have a background image and a color fill on top of that. 
    Page: home @www.soluforyou.com

    Attached files:  Screenshot 2023-07-04 at 16.29.44.jpg

  •  279
    Noah replied

    Hi there,

    To get something similar to the screenshot you can try and set a background image on a row and then have its type option set to full-width background.

    The background image should show behind the columns on the front end if the image has the leaves at the bottom right area.

    Thats the way we would attempt to implement this.
    Also maybe make the row full height to have a better effect.

    Hope this helps.
    Noah.

  •  16
    Soluforyou replied

    Yes, great tips. Made it work. Additional question, see block "
    Start your Solu Journey here' at soluforyou.com. 

    On the right side a pink circle I like to hide, its Z index is on -1.
    The white middle columns are 2. Overlaps and works.

    But the row below is also z:2, but it doesn't overlap. How can I solve this?
    I want the circle to be hidden by the next chapter so to speak

    Attached files:  Screenshot 2023-07-04 at 22.07.23.jpg

  •  2,958
    Andrew replied

    Hello again,

    Thank you for getting back to us.

    Try setting the z-index to 10 as you can see in the screenshot below and let us know how it goes.

    7031968967.png

    Best regards,

  •  16
    Soluforyou replied

    Yes, that worked. If I may, I would like to to give you also a ten for your super service. Thanks Andrew!

  •  16
    Soluforyou replied

    One more question Andrew if that's ok. I have put in an extra Circle at the top (see soluforyou.com).

    - The previous field above that has to overlap > i tried z 9 or 10. But no result
    - The small circle is set to -3 (also played with -2, -1, 0 and 1) > still overlaps

    Hope you can help out. 

    Attached files:  Screenshot 2023-07-05 at 10.34.15.jpg

  •  2,958
    Andrew replied

    Hello again,

    Thank you for getting back to us.

    For this to work, you will have to place the circle at the bottom of the section above the section you currently have it in since the z-index affects the entire row and its content. Hence why the circle can't be hidden in the section with the green background. 

    8136782326.png

    I hope that helps.

    Kind regards,

  •  16
    Soluforyou replied

    Thanks for this. I'm now an hour busy but can't escape huge problems. Please help me, my text column is pushed suddenly below. I am trying to make a row with inner rows, so I can place the circle as well in the main row. However before I can do this, I need to fix this. I am truly clueless, can you help me please?
    Please check my disaster at: https://soluforyou.com/home-2-2/

    Attached files:  Screenshot 2023-07-05 at 11.51.54.jpg

  •   Soluforyou replied privately
  •  16
    Soluforyou replied

    Hang on, just discovered its the 7vw in the column setting. Solved!

  •  16
    Soluforyou replied

    Could you help me with the last detail here, check screenshot and site at a different url please: https://soluforyou.com/home-2-2/

    - The circle that has to appear in the top green corner, is put as you specifically told me to in the block above, Z:-1
    - Now how to mask it so it appears in the top green corner ONLY? I have no idea.
    - Note: i have another circle in the green area as well as you know below on the right side. 
    Pease help


    PS I still don't understand why the left above circle should not be put in the green field. Because how do I now cover it? Andrew wrote 
    "For this to work, you will have to place the circle at the bottom of the section above the section you currently have it in since the z-index affects the entire row and its content. Hence why the circle can't be hidden in the section with the green background"

    But if make the creme field (above) lets say Z10, then automatically the circle - which is also on that row gets overrided. 


    Attached files:  Screenshot 2023-07-05 at 16.29.19.jpg
      Screenshot 2023-07-05 at 16.35.49.jpg

  •  16
    Soluforyou replied

    I have now seperated it, but it shows a white empty field. Please help, I've spend all day on this without a solution


    https://soluforyou.com/home-2-2/

    Attached files:  Screenshot 2023-07-05 at 17.00.40.jpg

  •  16
    Soluforyou replied

    Hope you can help!!

  •  8,839
    Tahir replied

    Hey Again,

    The page is giving a 404 , let us know if you still need help with this?. 

    Thanks.


    ThemeNectar Support Team 

  •  16
    Soluforyou replied

    Hi Tahir, it's back again. Can you take a look?

  •  2,958
    Andrew replied

    Hello again,

    Thank you for getting back to us.

    It's still giving a 404 error.

    2258425221.png

    Best regards,

  •  16
    Soluforyou replied

    Pardon my mistake, it should be live now:

    https://soluforyou.com/home-2

  •  8,839
    Tahir replied

    Could you place the circle where it needs to be so i can check for the z-index issue ?. 

    Thanks 


    ThemeNectar Support Team 

  •  16
    Soluforyou replied

    I wish I could, I can't. That's what I need your assistence with. 

    I want visually the circle to be in the top corner of the green area. Not in the beige above. But your colleque said I had to do this. 

  •  8,839
    Tahir replied

    Is that a circle a png ?. How exactly do you wish to add it ?. Also if it needs to be part of the background it can be added to the green texture image .

    Thanks 


    ThemeNectar Support Team 

  •  16
    Soluforyou replied

    It would save us time if you could login to Wordpress  shortly. 
    But yes it's a PNG that I want to use two times in the GREEN area
    - One time left corer > can't solve this
    - One time right corner > solved

    It needs to be separate from the green background and float above it. 

  •  8,839
    Tahir replied

    Hey Again,

    I was able to login however i cant view any of the z-index issues you mentioned. Please setup the circle image as is and provide us the page url so we can help you correct the issue at that point. 

    Thanks 


    ThemeNectar Support Team