How to create a preloading photos in my code?

I hope for your help.
This code smoothly change the background on the next one.


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.body_slides{
list-style:none;
margin:0;
padding:0;
 z-index:-2; 
background:none;}
.body_slides,
.body_slides:after{
 position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;}

@-webkit-keyframes anim_slides {
0% {opacity:0;}
1% {opacity:1;}
15% {opacity:1;}
20% {opacity:0;}
88% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
1% {opacity:1;}
15% {opacity:1;}
20% {opacity:0;}
88% {opacity:0;}
}
.body_slides li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:none;
opacity:0;
 -webkit-animation: anim_slides 21s linear infinite 0s;
 -moz-animation: anim_slides 21s linear infinite 0s;
 -o-animation: anim_slides 21s linear infinite 0s;
 -ms-animation: anim_slides 21s linear infinite 0s;
 animation: anim_slides 21s linear infinite 0s;
}

.body_slides li:nth-child(1){
background-image: url(images/1.jpg) 
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 1.0 s;
-moz-animation-delay: 1.0 s;
background-image: url(images/2.jpg) 
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 2.0 s;
-moz-animation-delay: 2.0 s;
background-image: url(images/3.jpg) 
}
.body_slides li:nth-child(4){
-webkit-animation-delay: 3.0 s;
-moz-animation-delay: 3.0 s;
background-image: url(images/4.jpg) 
}
.body_slides li:nth-child(5){
-webkit-animation-delay: 4.0 s;
-moz-animation-delay: 4.0 s;
background-image: url(images/5.jpg) 
}
.body_slides li:nth-child(6){
-webkit-animation-delay: 5.0 s;
-moz-animation-delay: 5.0 s;
background-image: url(images/6.jpg) 
}
.body_slides li:nth-child(7){
-webkit-animation-delay: 6.0 s;
-moz-animation-delay: 6.0 s;
background-image: url(images/7.jpg) 
}
#fixedbutton {
 position: fixed;
 bottom: 5px;
 right: 5px; 
}
body {
 background: url('images/7.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
</style>




 <ul class="body_slides">
<p></li>
<p></li>
<p></li>
<p></li>
<p></li>
<p></li>
<p></li>

</ul>
 <a href="../index.html"><img src="images/upbutton.jpg" id="fixedbutton"></a>

June 7th 19 at 14:38
1 answer
June 7th 19 at 14:40
Solution
Post pictures with the tag , not background.
that slider background - Randall63 commented on June 7th 19 at 14:43
Not immediately realized. I would have made a slider, not a background and to position the bottom with z-index.
In your case, will help the technique of sprites. Completely in Google "css sprites".
Brief: combine all images into one for each slide, select use the background-position property. In your case you can even do one for all the slides and make a nice transition to change. - brycen.Fisher commented on June 7th 19 at 14:46

Find more questions by tags JavaScriptHTMLCSS