The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Background image slide error, Background image slide error
Rating  5
vEdward
post 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 smile.gif

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);
}
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th July 2020 - 02:05 PM