Background image slide error, Background image slide error |
Background image slide error, Background image slide error |
vEdward |
May 3 2020, 11:25 AM
Post
#1
|
Group: Members Posts: 1 Joined: 3-May 20 Member No.: 27,318 |
Hello,sorry to bother you,this is my first post here,and I have a little problem with my style.css that I wanna do for my HTML and I don't know what am I doing wrong here,I'll let the code below to take a look at it.
The slide mechanism doesn't work, it's stuck just to one image. and I've tried everything from just rewriting that line,to rewriting the whole code letter by letter,number by number. If someone is kind enough to let me know what am I doing wrong,I'll always be thankful body,html{ margin: 0; padding: 0; font-family: sans-serif; width: 100%; height: 100%; } .section-top{ width: 100%; height: 100%; overflow: hidden; position: relative; background-image: url(image1..jpg); background-repeat: repeat; background-size: cover; animation: slide 10s infinite; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-transform: uppercase; text-align: center; } .content h1{ color: white; font-size: 60px; letter-spacing: 16px; } .content a{ background: #0984e3; padding: 10px 24px; color: white; text-decoration: none; font-size: 10px; border-radius: 20px; } p{ font-size: 20px; padding: 10px; line-height:24px; } @keyframes slide { 0%{ background-image: url(image1.jpg); } 33%{ background-image: url(image2.jpg); } 67%{ background-image: url(image3.jpg); } } |
Lo-Fi Version | Time is now: 25th April 2024 - 10:20 AM |