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'); } }
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'); } }
0 Replies