CODEWITHSUNDEEP
javascripthtml
xdasdawsda
xdasdawsda

Reputation: 1

How to make the background image change without a button with HTML & Javascript

I'm trying to make the background image change without a button, with any click in the back but its not working. I tried to set the default background image defined in the CSS:

background-image: url('https://img.wallpapersafari.com/desktop/1920/1080/63/70/jE2ups.jpg');

And use this JavaScript, but once the imagen change I cant go back to the old one.

function myFunction() {
    document.body.style.backgroundImage = "url('https://raw.githubusercontent.com/hxst1/hxst1.github.io/main/img/p2.jpg')";
}

Also tried $document on click but im new at this and its not working either.

Upvotes: 0

Views: 605

Answers (5)

Mr.Goat
Mr.Goat

Reputation: 26

It sounds like you are trying to toggle an image so you set the background image in css then switched it in javascript but forgot to write in the javascript the conditional statements (if/else). Basically if background is the first picture then change it to the second picture else change to first picture. Your code only says to change it to second picture.

function background(){
var body = document.body;
if(body.style.backgroundImage = "url('pic1')"){
body.style.backgroundImage = "url('pic2')";
} else {
body.style.backgroundImage = "url('pic1')";
}
}

Upvotes: 0

sikurro
sikurro

Reputation: 375

if you want to automatic change every 1,2,3 or any seconds, you can try this way.

document.addEventListener('click',function myBackground(){
    changeBackground();
})

let images = [
    'https://images.unsplash.com/photo-1485322551133-3a4c27a9d925?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
  'https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=853&q=80',
  'https://images.unsplash.com/photo-1600498148212-62bd3542ed63?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
  'https://images.unsplash.com/photo-1611091428036-e0211d8016f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=745&q=80',
  'https://images.unsplash.com/photo-1600431521340-491eca880813?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
];

let index = 0;
function changeBackground(){
    document.body.style.backgroundImage = "url('"+images[index]+"')";
  index = (index < images.length-1) ? (index+1) : 0;
}


// change backgroubd every 3 seconds
var interval = window.setInterval(function(){
  changeBackground()
}, 3000); // 1000 = 1 second

// function to stop interval 
// clearInterval(interval) 
<h3>
change background
</h3>

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

Like Spectric commented you can toggle background image:

document.addEventListener('click',function (){
    document.body.classList.toggle('body_change');
})
.body_change {
    background-image: url('https://picsum.photos/300');
}

body {
  background-image: url('https://picsum.photos/200');
}
<body>
</body>

Upvotes: 1

user16606546
user16606546

Reputation:

If you want to toggle between 2 images it can easily be done by toggling a class on the body

document.addEventListener('click', () => {
    document.body.classList.toggle("bgr");
})
body {
  background-image: url('https://img.wallpapersafari.com/desktop/1920/1080/63/70/jE2ups.jpg');
}
.bgr {
  background-image: url('https://raw.githubusercontent.com/hxst1/hxst1.github.io/main/img/p2.jpg') !important;
}

Upvotes: 1

Marcos Salazar
Marcos Salazar

Reputation: 1

try that:

document.addEventListener('click',function myBackground(){
    document.body.style.backgroundImage = "url('https://raw.githubusercontent.com/hxst1/hxst1.github.io/main/img/p2.jpg')";
})

Upvotes: 0

Related Questions