javascriptreactjsuppy

Why is image being laid out repeatedly in this background

I have this Codesandbox

I can't understand why the image here looks like this: repeatedly being displayed please advice. This only happens when image ratio is 1:5

enter image description here

This code is this in AnimatedList.jsx:

    <Flipped
      flipId={`media-${fileId}`}
      shouldFlip={shouldFlip(fileId)}
      delayUntil={createCardFlipId(fileId)}
    >
      <div
        className="media"
        style={{
          backgroundSize: "contain",
       
          backgroundImage: "url(" + file.preview + ")",
        }}
      />
    </Flipped>

And the styles.scss

  .media {
    position: relative;
    width: 100%;
    padding-top: 100%;
    top: 0;
    left: 0;
    border-radius: 16px;
    background-size: cover;
  }
Solution

  • You need to apply the background repeat in your scss class.

    background-repeat: no-repeat;