CODEWITHSUNDEEP
css
Dave
Dave

Reputation: 2018

Css animation background going on top of eachother

I am trying to add this animation to my background, but when going on mobile device, the background triples even when I set the background size cover, on pc version it works fine, only one background. Why is this happening?

Image

.main {
    background-image: url("~@/assets/main-bg.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    animation: shrink 5s infinite alternate;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}

@keyframes shrink {
  0% {
    background-size: 110%;
  }
  100% {
    background-size: 100%;
  }
}

Upvotes: 0

Views: 45

Answers (2)

A Haworth
A Haworth

Reputation: 36446

You can keep the cover property if you use scale instead of changing background size. Obviously you don't want the whole of main to scale in and out - only the image - so put that as background on the before pseudo element, set it as cover and to transform between scale 1.1 and 1.

That way you get both effects and it's fully responsive.

.main {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    position: relative;
}
.main::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: shrink 5s infinite alternate;
  background-image: url("https://picsum.photos/id/259/1024/768");
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}
@keyframes shrink {
  0% {
    transform: scale(1.1);;
  }
  100% {
    transform: scale(1.0);
  }
}
<div class="main"></div>

Upvotes: 1

Dat Boi
Dat Boi

Reputation: 683

Add in this css property background-repeat: no-repeat;

This will stop the background image from appearing more than once.

Also, your keyframes changes the background size from cover to 100/110%. Over riding the property.

Upvotes: 1

Related Questions