Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #534663

    Dear Support Team,
    I’ve created on my website a color section. The Color Section I have been with CSS a gradient.

    #gruen {
    background: -webkit-linear-gradient(45deg, #387f21, #4eaf30);
    background: -o-linear-gradient(45deg, #387f21, #4eaf30);
    background: -moz-linear-gradient(45deg, #387f21, #4eaf30);
    background: linear-gradient(45deg, #387f21, #4eaf30);

    I want to create a transparent image in the Color section. Unfortunately, this is not displayed Png transparent but white. How can I create the png as background the Color Section and Transparency?

    I want to do this to reduce the load time of the site. Also, I do not want to create a image of the gradient because there are ugly streaks.

    On this page I have tried a lot.

    At the bottom of the pages are the Green Color Sections. The first 3 Color Sections are quite normal with wallpaper. Here you can also see the unsightly stripes in gradient. The penultimate Color Section has a gradient (CSS). Here I have tried to integrate the PNG as a background image (PNG is displayed without transparency). In the last Color Section no gradient is applied via CSS and created a PNG as the background. That’s very good. But I would like a color gradient :-)

    Can you help me?
    Thank you ever and greetings!


    Hi LorbeerDesign!

    I have created a private testing page [link in private content field below] and added custom CSS code to bottom of Quick CSS field.
    If you would like to use background image and gradient background, please edit your color section elements and choose to display background overlay and then adjust the code i added in Quick CSS field and upload your background image as color section custom background image.



    Hi Yigit,

    everything has worked out far. I’ve created on your test page a new Color Section.

    Only I can not do it, the PNG inserting as the background. Can you give me an example of this image inserting – you can use this picture Link to picture ?
    So I can see how this works exactly :-)

    Thank you very much Yigit

    • This reply was modified 8 years, 5 months ago by LorbeerDesign.


    I have inserted background image to your color section on the testing page. Please review your website now :)



    Hi Yigit,

    Thanks, it all worked. It is a pity that you have to set the Transparency to 0.5. Thus, the color change of the gradient. If I set the transparency to 1.0, then the background image disappears. Unfortunately, this is not an optimal solution for me – I think then I renounce the gradient ;-)

    Thank you nevertheless for your effort and a nice Friday :-)



    You are welcome! Let us know if you have any other questions or issues and have a great weekend! :)


Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Gradient in Color Section and Png as background on it’ is closed to new replies.