Problem with making a background animation responsive

Question

I built an animation for my background but is not responsive and I don't know how to make it. I used Bootstrap 4 and CSS as my main design resources.

The CSS I sued as follows:

/* Animation GLitch */
.animation {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.animation:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
    opacity: 0.5;
    mix-blend-mode: hard-light;
    display: block;
}
.animation:hover:before {
    animation: animate 0.2s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0 0;
        filter: hue-rotate(0deg);
    }
    10% {
        background-position: 5px 0;
    }
    20% {
        background-position: -5px 0;
    }
    30% {
        background-position: 15px 0;
    }
    40% {
        background-position: -5px 0;
    }
    50% {
        background-position: -25px 0;
    }
    60% {
        background-position: -50px 0;
    }
    70% {
        background-position: 0 -20px;
    }
    80% {
        background-position: -60px -20px;
    }
    81% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 0;
        filter: hue-rotate(360deg);
    }
}

The animation consists of 2 same pictures that create this glitch effect but I don't know how to make it responsive.

The snippest it is working here: https://codepen.io/Jakub41/pen/abbwxWb

I tried to use the sizing but it is modifying my effect I would like to keep the same effect on all screens

Did you consider using media queries (https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.w3schools.com/css/css_rwd_mediaqueries.asp&ved=2ahUKEwijz5mDtL3lAhWosKQKHaicCjQQFjAcegQIBxAB&usg=AOvVaw2JP4RTXEyog6-UAtwzM2sY&cshid=1572212570569)? — L483, Oct 27 '19 at 21:43
with javascript you could do ```let width = window.innerWidth; window.onresize = fixGlitch; function fixGlitch() { document.querySelector('main').style.transform = `scale(${window.innerWidth/width});` width = window.innerWidth; }``` — ezra, Oct 27 '19 at 22:14

L483 · Answer 1 · 2019-10-27T23:06:01.553

0

I do not quite understand in which way you want it to be responsive but try adding these lines after background: url(...) both times:

background-repeat: no-repeat;
background-size: cover;

Look here for more information about the background-size property.

Also the second answer of this question might interest you.

edited Oct 27 '19 at 23:06

answered Oct 27 '19 at 22:53

L483

170
1
11

Problem with making a background animation responsive

1 Answers1