Hello, I'm little bit curios if this even possible, but if it's I would appreciate if someone could help with it.
What I'm trying is to make on html page change background, header and footer background by list who is going by row. For example: when on page is background1.png, there is header1.png and footer-bg1.png too.
I have found similar javascripts, but they change those images by random, not by row (example: background2png, header1.png and footer-bg3.png)
html:
<div class="about show-for-medium-up"section class="about" id="about"> </div>
<div class="about__solders show-for-medium-up"" id="about__solders"></div>
<div class="footer-bg show-for-medium-up" section class="footer-bg" id="footer-bg"> </div>
css:
.about__solders {
max-width: 1206px;
min-height: 479px;
width: 100%;
height: 100%;
background: url(img/header1.png);
background-repeat: no-repeat;
background-position: center bottom;
position: absolute;
left: 52%;
bottom: -206px;
transform: translate(-49%, 0);
}
.about {
padding: 4.12rem 6.25rem;
background: url(bg1.png);
background-size: contain, auto, auto, cover;
background-position: top center, left center, right center, center center;
background-repeat: no-repeat;
background-color: #000;
overflow: hidden;
}
.footer-bg {
padding: 68px 0px;
background: url(img/main-page-eff-bottom.png), url(img/footer-bg.jpg);
background-size: auto, cover;
background-position: center bottom, center;
background-repeat: no-repeat, no-repeat;
}
javascript
<script>
function randomImage() {
var images = [
'./img/header1.png',
'./img/header2.png',
'./img/header3.png'];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
var element = document.getElementsByClassName('about__solders');
console.log(element);
element[0].style["background-image"] = "url(" + images[x] + ")";
}
document.addEventListener("DOMContentLoaded", randomImage);
</script>
<script>
function randomImage() {
var images = [
'./img/bg1.png',
'./img/bg2.png',
'./img/bg3.png'];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
var element = document.getElementsByClassName('about');
console.log(element);
element[0].style["background-image"] = "url(" + images[x] + ")";
}
document.addEventListener("DOMContentLoaded", randomImage);
</script>
<script>
function randomImage() {
var images = [
'./img/footer-bg1.png',
'./img/footer-bg2.png',
'./img/footer-bg3.png'];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
var element = document.getElementsByClassName('footer-bg');
console.log(element);
element[0].style["background-image"] = "url(" + images[x] + ")";
}
document.addEventListener("DOMContentLoaded", randomImage);
</script>
