Background image + linear gradient combined not working on phone (safari)

I have a banner on my site which has a linear gradient background on it, it works well on desktop, but if I open it on my phone I can't see the background image, only the linear gradient background shows up.

There is the code

#banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 11rem;
width: 100%;
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: animate 30s step-end infinite;
}

@keyframes animate {
0% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_1.JPG');
}

20% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_2.JPG');
}

40% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_3.JPG');
}

60% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_4.JPG');
}

80% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_5.JPG');
}

100% {
background-image: linear-gradient(rgba(0, 0, 0, 0.425), rgba(0, 0, 0, 0.425)),
url('../img/banner_6.JPG');
}
}

KP-C

Kevin Powell - Community•4y ago

Szabi

Background image + linear gradient combined not working on phone (safari)

Background image + linear gradient combined not working on phone (safari)

Similar Threads

Background image + linear gradient combined not working on phone (safari)

Similar Threads

Similar Threads

Similar Threads