Currently, I am in the process of developing a responsive landing page using Bootstrap 4 and I would like to implement a background that changes every few seconds. Although I have managed to make the images change dynamically, I am facing difficulties incorporating the img-responsive class into the design.
<section id="fh5co-home" data-section="home" style="background-image: url(images/pretty-bastard-client-lounge.jpg);" data-stellar-background-ratio="0.5">
<script>
var images = [
"images/pretty-bastard-dallas-print-studio.jpg",
"images/pretty-bastard-lobby.jpg",
"images/pretty-bastard-sound-stage.jpg",
"images/pretty-bastard-studio-walls.jpg",
]
var imageHead = document.getElementById("fh5co-home");
var i = 0;
setInterval(function() {
imageHead.style.backgroundImage = "url(" + images[i] + ")";
i = i + 1;
if (i == images.length) {
i = 0;
}
}, 7000);
</script>
The CSS code for achieving this effect is as follows:
#fh5co-home {
background-color: transparent;
background-size: cover;
position: relative;
width: 100%;
color: #fff;
}
@media screen and (max-width: 480px) {
#fh5co-home {
background-position: center center;
background-attachment: initial;
}
}