2 css backgrounds: 1 plain image and 1 with repeated dots to cover the image.
The image needs to be streched using the style "background-size: cover;"

The dots are just to be repeated, not streched so following CSS is applied:

```
.mybackground_pic
{
  height: 1000px;
  width: 1000px;
  background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
  url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
  background-size: unset, cover;
}

```

But above code causes the cover not to work (image is repeated, see <https://codepen.io/jacopsd/pen/MWWZdaX>)

2n try: Leaving out the "unset" also doesn't solve it as it streches the dots (see <https://codepen.io/jacopsd/pen/xxxmNvV>) :

```
.mybackground_pic
{
  height: 1000px;
  width: 1000px;
  background-image: url(https://hubskills.com/wp-content/uploads/black-dots.png),
  url(https://upload.wikimedia.org/wikipedia/commons/8/81/Bryce-demo-RedDawn.jpg);
  background-size: cover;
}

```

How to get the image streched but the dots repeated?