Repeatable background image with gradient overlay + background-size

I have a texture that I want to use as a repeatable background image. I want the background to also contain a gradient overlay on top of the image so that the background fades out to solid white. I was able to get that working like this:

.texture {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
}

<div class="texture"></div>

The problem is that I would like to make the texture smaller, so I added a background-size in order to accomplish that, but that seems to screw up my gradient overlay as seen below:

.texture {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
  background-size: 100px 100px;
}

<div class="texture"></div>

Is there any way to resize the background image without affecting the way the gradient overlay works?

Solution

You can define a different background size for each background image:

.texture {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
  background-size: auto, 100px 100px;
}

<div class="texture"></div>