Background Image Switcher

Image links change the background image of a div. Version 1

by Angelica

HTML

<div id="example">This is a little example of how the background will look!</div>

<p>
  <a href="#" onclick="bgChange1()"><img src="https://i.postimg.cc/4y1ymJ0w/kitty2_7.png" width="50px;"></a> 
  <a href="#" onclick="bgChange2()"><img src="https://i.postimg.cc/4xftv0bJ/cosmic6.png" width="50px;"></a>
</p>

CSS

/* you can edit virtually ALL of the values to suit your needs */
div#example {
  width: 90%;
  height: 150px;
  margin: 0 auto;
  border-radius: 20px;
  border: 3px solid #ededed;
  padding-top: 20px;
  text-align: center;
  background: #eeeeee;
  text-shadow: 0px 0px 8px #802e8e;
  text-align: center;
  font-family: 'Tahoma', sans-serif;
  font-size: 14px;
  letter-spacing: -.5px;
  word-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
  color: #000000;
}

p {
  text-align: center;
}

JavaScript

function bgChange1() {
  document.getElementById("example").style.backgroundImage = "url('https://i.postimg.cc/4y1ymJ0w/kitty2_7.png')";
}

function bgChange2() {
  document.getElementById("example").style.backgroundImage = "url('https://i.postimg.cc/4xftv0bJ/cosmic6.png')";
}