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

<button id="b" data-bg="true">TOGGLE new background values</button>

<p>See <a href="http://www.sitepoint.com/12-little-known-css-facts/">article</a>.</p>

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(http://placekitten.com/200/200/) 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(http://placekitten.com/200/200/) no-repeat scroll center center';
    this.setAttribute('data-bg', 'false');
  } else {
    box.style.background = 'aquamarine url(http://placekitten.com/200/200/) no-repeat scroll center center / 50% content-box content-box';
    this.setAttribute('data-bg', 'true');
  }
};