Gradient in Color Section and Png as background on it

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.
http://www.20-jahre-dietmar-hopp-stiftung.de/home-test-hintergrundbilder/

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!