<div class="example" id="box"></div>

<button id="b" data-bg="true">切换新background属性值</button>

body {
  text-align: center;
  font-family: Arial, sans-serif;
}

.example {
  box-sizing: border-box;
  width: 220px;
  height: 220px;
  padding: 20px;
  border: solid 1px black;
  margin: 15px auto;
  background: aquamarine url(https://www.webhek.com/wordpress/wp-content/uploads/2014/07/200.jpg) no-repeat scroll center center / 50% content-box content-box;
}

p {
  text-align: center;
}

var i = document.getElementById('box'),
    b = document.getElementById('b');

b.onclick = function () {
  if (this.getAttribute('data-bg') === 'true') {
    box.style.background = 'aquamarine url(https://www.webhek.com/wordpress/wp-content/uploads/2014/07/200.jpg) no-repeat scroll center center';
    this.setAttribute('data-bg', 'false');
  } else {
    box.style.background = 'aquamarine url(https://www.webhek.com/wordpress/wp-content/uploads/2014/07/200.jpg) no-repeat scroll center center / 50% content-box content-box';
    this.setAttribute('data-bg', 'true');
  }
};