Gradient on background using CSS

I want to create something like this for the top section of my one-page website. repeating background image with a gradient

I have figured out how to repeat a background image, but I was wondering if there is a way I can specify opacity for each time the image gets repeated.

This is the CSS code I've used for the section:

section{
    width: 100%;
    float: left;
    height: 100vh;
    background-image: url("img/bgflower.jpg");
    background-repeat: repeat-x;
    background-size: contain;
    
}

Please suggest any methods I can use to achieve the same, thank you!