Question:
Hello need help here how do you make a html background changer where the user changes the background and keeps it
and if you all can can you make me a html this so i can copy it and thanks
1 Like
Welcome to Ask! This can be implemented using some JS and CSS.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="red()">Make me red!</button>
<button type="button" onclick="blue()">Make me blue!</button>
<script>
function main() {
document.body.style.backgroundColor = localStorage.getItem("color")
}
function red() {
document.body.style.backgroundColor = "red";
localStorage.setItem("color","red");
};
function blue() {
document.body.style.backgroundColor = "blue";
localStorage.setItem("color","blue");
};
if (!sessionStorage.visited) {
//If user hasn't been to site, do the rest of this
sessionStorage.visited = true; //Set that user has been to site
blue(); //Set initial theme colors
main(); // With the color scheme set, execute the main function
};
window.onload = main();
</script>
</body>
</html>
https://html-background-changer.coderelijah.repl.co
Note that this is a very basic example. Ideally, you put the JS in a separate file so that all your HTML files will load with the same colors.
1 Like
well how do you do like pics and stuff like that and how do you make it where you can see it till you click
To do a picture, upload your image to your Repl and then use this function instead:
function image() {
document.body.style.backgroundImage = "url('your_image.png')";
}
how do you do something like this for every page
lol not trying to copy it
Store your JS in a separate file (not your HTML file) and then link it.
As for how to do a fancy background picker like Chrome, that is going to be far more difficult and probably not for beginners (unless they are patient and persistent). Google Chromium is open source; try checking the source code (or just use the browser inspect F12). Iām not sure it copying it is legal but it would at least give you an idea how you could make something like that.