Background Image Distorted when using cover and appending lots of images

I am having some difficulty adjusting a background image for a website I am writing. I want to use a large picture to cover the background of the site. I am using the css property cover and it looks fine when the page loads.

My problem is when a button is clicked, it appends 10 images to an empty div. When these images are appending, that div is growing very large and changing the page size, which causes the image to reload to adapt to this siginificantly increased page size. This leads to the image looking very distorted.

Is there any way to keep the image the same size as it was when the page loads, and have a simple background color under the image that will cover the rest of the page when the images are appended?

I am using background-size: cover and background-repeat: no-repeat

Thanks for your time.

Solution

Not 100% I get you, but you could try having two divs.

One div would contain your background image and be set to height: 100vh; and width: 100vw;. This will ensure the image will always stay the same size as the viewport and thus won't change size when things are added.

Under this div, you could have another, with a simple colour property set.

I.e.,

.bg-image {
  width: 100vw;
  height: 100vh;
  background-image: url(someurl);
  background-size: cover;
  background-repeat: none;
}

.bg {
  background-color: grey;
  height: 100%;
  width: 100%;
}

<div class="bg">
  <div class="bg-image">
    <!-- Place where the images go -->
  </div>
</div>