2 css backgrounds & cover

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?

Solution

Change to background-size: auto, cover:

.mybackground_pic {
  height: 1000px;
  width: 1000px;
  background: 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: auto, cover;
}

<div class="mybackground_pic">
</div>