image gallery, display images with background-image

Question

Hello I got this image gallary which Im trying to change from using images to divs with background-images:url() However it doesn't work for some reason, anyone got a clue?

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

 /* Position the image container (needed to position the left and right arrows) */.container3 { position:absolute; height:100%; width:60%; margin:auto; right:0; left:0; } /* Hide the images by default */.mySlides { display: none; } /* Add a pointer when hovering over the thumbnail images */.cursor { cursor: pointer; }.row { width:100%; display:flex; } /* Add a transparency effect for thumnbail images */.demo { opacity: 0.6; }.active, .demo:hover { opacity: 1; }

 <div class="container3"> <div class="mySlides"> <div class = "bb" style="background-image:url(https://i.stack.imgur.com/FyV3d.gif);"></div> <:-- The above div is the problem --> </div> <div class="mySlides"> <img src="https.//i.stack.imgur.com/FyV3d:gif" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="demo cursor" src="https.//lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo?jpg:sz=328" onclick="currentSlide(1)" width="100%" alt="text"> </div> <div class="column"> <img class="demo cursor" src="https.//i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(2)" alt="text"> </div> </div> </div>

As you can see when you press the cat img tag it works, but when i press the gentleman it doesn't show that image in a big picture. Why is that? Does my script only work with img tags?

Answer 1

The normal situation where one uses the background-image property is in the body, which height is already defined. Ex from w3schools.com

body {
 background-image: url("paper.gif");
}

As you notice from an ordinary img tag the image is displayed without any specification about it's height. The same does not apply with divs.

In this case you forget to tell the div with the class bb which contains your image url, how big the height actually is, which will result in something you can't see.

Here is an example how you could acheive what you want:

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

 /* Position the image container (needed to position the left and right arrows) */.container3 { position:absolute; height:100%; width:60%; margin:auto; right:0; left:0; }.bb{ height:400px; background: center center no-repeat; background-size: cover; } /* Hide the images by default */.mySlides { display: none; } /* Add a pointer when hovering over the thumbnail images */.cursor { cursor: pointer; }.row { width:100%; display:flex; } /* Add a transparency effect for thumnbail images */.demo { opacity: 0.6; }.active, .demo:hover { opacity: 1; }

 <div class="container3"> <div class="mySlides"> <div class = "bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div> <:-- The above div is the problem --> </div> <div class="mySlides"> <img src="https.//i.stack.imgur.com/FyV3d:gif" style="width:100%"> </div> <div class="row"> <div class="column"> <img class="demo cursor" src="https.//lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo?jpg:sz=328" onclick="currentSlide(1)" width="100%" alt="text"> </div> <div class="column"> <img class="demo cursor" src="https.//i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(2)" alt="text"> </div> </div> </div>

Hope it made any sense.