CODEWITHSUNDEEP
javascriptcssbackground
Bugs Bunny
Bugs Bunny

Reputation: 47

Javascript add multiple background images using HTML DOM or Jquery

So basically, I'm trying to have a table with a background, and sometimes a background is added on top. Is there a way to add a background in Javascript, but keep the old one?

Upvotes: 1

Views: 468

Answers (1)

Unmitigated
Unmitigated

Reputation: 89472

You can use the background-image CSS property, which can be given multiple images. The first background specified will be on the top and the last one will be on the bottom.

document.querySelector("button").addEventListener("click", function(e){
  document.querySelector("table").style.backgroundImage += ",url(https://www.w3schools.com/css/paper.gif)";
}, {once: true});
<table style="height: 100px; width: 100px; border: 1px solid black; background-image: url(https://www.w3schools.com/css/img_flwr.gif);">
</table>
<button>
Add Image
</button>

Upvotes: 2

Related Questions