How to create an image that repeats for a js fade in and out background slideshow?-CodePudding

I am currently building a website and I want a aesthetically pleasing landing page with a background fade in and out slideshow comprised of pictures that repeat y and x. I have the fading slideshow working perfectly and all I need is to repeat the image across the screen. Adding background: repeat to the CSS does not work. Below is may code:

HTML:

<div  id="slider">
   <div>
        <h2>Dog Adoption</h2>
        <p>Find the perfect match for your new four legged companion</p>
    </div>
</div>

JavaScript:

var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
imgArray = [
    '../../static/main/images/slideshow/dog2.jpg',
    '../../static/main/images/slideshow/dog3.jpg',
    '../../static/main/images/slideshow/dog4.jpg', 
    '../../static/main/images/slideshow/dog1.jpg',  
];


//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
    for (i = 0; i < arr.length; i  ) {
        var img = document.createElement('img');
        img.src = arr[i];
        slider.appendChild(img);
    }
    // note the slides reference will now contain the images so we can access them
}

//
// Our slideshow function, we can call this and it flips the image instantly, once it is 
called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {

    function fadeIn(e) {
        e.className = "fadeIn";
    };

    function fadeOut(e) {
        e.className = "";
    };

    
    fadeOut(slides[curIndex]);
    curIndex  ;
    if (curIndex === slides.length) {
        curIndex = 0;
    }
    
    fadeIn(slides[curIndex]);

    setTimeout(function () {
        slideShow();
    }, imgDuration);
};
buildSlideShow(imgArray);
slideShow();

CSS:

.mybody{
    width: 100%; 
    min-height: 100vh;
    max-height: fit-content;
    top: 0px; 
    left: 0px; 
    padding: 0px;
    /*background: url(../images/slideshow/dog1.jpg);*/
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px;
    position: relative;
    background-repeat: repeat;
}

.mybody img {
    transition: opacity 1.5s;
    position: absolute;
    left: 0; 
    top: 0;
    opacity:0;
    background-repeat: repeat;
}

.mybody img.fadeIn {
    opacity:1;
}

When I just set the background image as a fixed image (no JS) I get the desired result:

However when I comment out the backgorund image (as in above code) and just have the JS slideshow as the background, this is the result:

I essentially just need this image from the second picture to repeat as in the first picture and cannot figure out how to make this happen although I am sure there is a simple fix/solution. If anyone could be of help it would be much appreciated. Thanks in advance!

CodePudding user response：

You can't repeat an image without duplicating it. But you can repeat background so, you can make the slide using divs with background. Note the usage of css classes instead of jquery fade.

slide = 1;
setInterval(function() {
  $(".slide").removeClass("active");


  $(".div"   slide).addClass("active");
  slide  
  if (slide == 4) {
    slide = 1;
  }

}, 1000)

body {
  height: 100vh;
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  text-align: center;
  padding: 30px;
}

.slide {
  background-repeat: repeat;
  background-size: 100px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: 1000ms all;
}

.slide.active {
  opacity: 1;
}

.div1 {
  background: url('https://picsum.photos/id/101/200');
}

.div2 {
  background: url('https://picsum.photos/id/102/200');
}

.div3 {
  background: url('https://picsum.photos/id/103/200');
}

.text {
  position: relative;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<body>
  <div >

  </div>
  <div >

  </div>
  <div >

  </div>
  <div >
    <h1>dog trainer</h1>
    <p>best in the world</p>
  </div>
</body>