<div id="onevalue">
  <p><code>background-position: 10px;</code></p>
</div>

<div id="twovalues">
  <p><code>background-position: 10px 35px;</code></p>
</div>

<div id="threevalues">
  <p><code>background-position: right 45px bottom;</code></p>
</div>

<div id="fourvalues">
  <p><code>background-position: right 45px bottom 20px;</code></p>
</div>

div {
  width: 400px;
  height: 200px;
  border: 5px solid #E18728;
  margin-bottom: .5em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png); 
  background-repeat: no-repeat;
}

#onevalue { background-position: 10px; }

#twovalues { background-position: 10px 35px; }

#threevalues { background-position: right 45px bottom; } 

#fourvalues { background-position: right 45px bottom 20px; }



/* styling for Pen, unrelated to background-position */
p { 
  margin-top: 10px;
  padding: 0 1em;
}