Jasper template, make background of index page transparent

Site URL: https://www.bvandaal.com

Hello! Would greatly appreciate the help as I've tried a few different things without luck.

I have a gradient background on my website, but the standard site bg color is messing up the margins in my index page. Essentially I need the site's bg to be transparent but only for the index. If I set the site bg to be transparent in the site styles, then the index page looks good but now my header and footer have no bg color.

www.bvandaal.com

pw is "WIP"

I have tried these 3 CSS snippets and none have worked...

.collection-type-index #portfolio {
 background-color: none, !important;
}

#collection-60285049dea9552bd2a02fd1 {
      background-color: none, !important;
}

.collection-60285049dea9552bd2a02fd1 #portfolio{
      background-color: none, !important;
}

It looks like you solved with this?

#collection-60285049dea9552bd2a02fd1 {
    background: none !important;
}

This isn't solved yet.... between the index page items you can see a colored bar which is the bg color of the site. I don't know how to remove it. You can see it in the middle as it's a lighter color than the gradient bg I have:

Hi. Did you remove it? I don't see on homepage