TutorialMeta
Ad

Is There A Button Function To Completely Remove Background?

- 1 answer

I'm having trouble with a button function. I have an HTML document with a background set for all pages (in order to keep a common theme). I created a button on one of my pages with the intent of removing the background on that one specific page. I used a script function to change the background color to white. When I press the button, the background changes to white, except for the parts that have text (see images linked below). How can I get the button to essentially remove the entire background?

before button is pressed

after button is pressed

Here is the code I have so far:

 <body>
<style>
  body {
    background-image: url(IMG_7305.JPG);
    background-size: cover;
    background-attachment: fixed;
</style>


<button id="button" type="button" onclick="myFunction()"> Press here to remove the background image </button>

<script>
  function myFunction() {
    document.getElementById("about").style.backgroundColor = "white"
  }
</script>
<p> 
  I want the background to be cleared... even here!!
</p>

Ad

Answer

You need to target the body where the image is, not just the "about" element.

function myFunction() {
  document.querySelector("body").style.backgroundImage = "none";
}
body {
    background-image: url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/beach-quotes-1559667853.jpg');
    background-size: cover;
    background-attachment: fixed;
 }
<button id="button" type="button" onclick="myFunction()"> Press here to remove the background image </button>

<p> 
  I want the background to be cleared... even here!!
</p>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad