How to combine image with pattern?

Can anybody please help me, I would like to have a little pattern on my image. This is the working image code:

.section {
background: linear-gradient(rgba(120, 0, 255, 0.8), rgba(255, 0, 54, 0.8)), url("data:image/svg+xml,%3Csvg
 xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4
 4'%3E%3Cpath fill='%237800ff' fill-opacity='0.5' d='M1
 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
color: white;
background-attachment: fixed; }

and the url(../img/image.jpg);

I am trying and trying and cant do it. Maybe somebody could give me a hint? Please.