Add a hatch pattern over a linear-gradient in a div

Question

I have a div with a linear-gradiant as background. This gradient is created with a color parameter. But I also want to show a diagonal hatch pattern over the gradient.

"background: linear-gradient(" + color2 + "," + color + ")"

I've created the hatch pattern with another linear-gradient:

background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black   75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
background-size: 4px 4px;
background-position: 0 0, 2px 2px;

I'm not able to show the two linear-gradient at the same time.

Answer 1

The order is important. Your last background-image will be rendered first, so this one has to be the non transparent one.

And also, you need to keep all the related properties, size and origin:

.div1 {
    background-image: 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black  75%, black), 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
        linear-gradient(#f00000,#ffffff);
    background-size: 4px 4px, 4px 4px, 100% 100%;    
    background-position: 0px 0px, 2px 2px, 0px 0px;
}

fiddle

Answer 2

you could have nested divs and then apply the styles separately:

Html

<div class="div1"><div class="div2"></div></div>

Css

.div1 {background: linear-gradient(#f00000,#ffffff)}
.div2 
{
    background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black  75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

Example