I am making a slider using html and css. It's working fine, but if I set the height to 100%, it disappears. It works fine if I use pixels instead of percentage, but when I use suppose 100% or anything with percentage it will not show up.
It is all happening in the .imgcont
body {
height: 100%;
}
.slides {
height: 100%;
width:100%;
padding: 5px;
}
.imgcont {
width: 50%;
height:100%;
animation: showpromo 20s linear infinite;
}
@keyframes showpromo {
0%{background-image: url(1.JPG); background-size: 100% 100%;}
15%{background-image: url(2.JPG); background-size: 100% 100%;}
20%{background-image: url(3.JPG); background-size: 100% 100%;}
35%{background-image: url(4.JPG);background-size: 100% 100%;}
40%{background-image: url(5.JPG); background-size: 100% 100%;}
55%{background-image: url(1.JPG); background-size: 100% 100%;}
60%{background-image: url(2.JPG);background-size: 100% 100%;}
75%{background-image: url(3.JPG);background-size: 100% 100%;}
80%{background-image: url(4.JPG);background-size: 100% 100%;}
100%{background-image: url(5.JPG);background-size: 100% 100%;}
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="slider.css" type="text/css">
</head>
<body>
<div class = "slides">
<div class="imgcont">
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire