bg image does not respect bg transparancy on homepage?

WEBSITE : https://www.vlietpark.nl

Anyone can help me with the following

In my child theme of responsive this is what I have done.

Featured Content
.front-page #wrapper : the frontpage background is as default set to transparent

#featured : I have put a background image to the featured area for the homepage.

Globals section
#wrapper HAD put a yellow background color for the rest of the pages

So far everything worked, and did what I want it to do
– I have a background image in the featured area
– the background of the 3 widgets on the homepage is transparant
– and there is a background color for the pages.

HOWEVER I dont want a background color on the pages, but a background image (in this case the same background image as i use in the featured area.)

But as soon as I change the background color for a background image in #wrapper, it also fills up the background of the 3 widgets on the homepage, which is SUPPOSED TO BE TRANSPARANT as coded in the .front-page #wrapper

This is how you can see the site now on https://www.vlietpark.nl

How can it be that the background color in the #wrapper respects the transparancy of the .front-page #wrapper but a background image does NOT ? ( I also did test with other background image, same result)

Any other “route” I can follow to get the wanted result = an image background for the pages and a transparant background for the 3 widgets on the homepage ?

Thanks very much. Carolien