<div class="container">
  <p>The following background image is positioned at <code>50% 100%</code>, which means that the point across 50% 100% of the image is positioned at the point across 50% 100% of the element's background area. This means that it will be centered horizontally and and positioned at the bottom of the element.</p>
  <div class="el position-percentage"></div>
  <p>The following background image is positioned at <code>30px 45px</code>, which means that element's top left corner is offset by 30px to the right and 40px downwards.</p>
  <div class="el position-pixel"></div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 90%;
}

.el {
  width: 100%;
  height: 400px;
  background-color: #ffd376;
  background-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/background-position/sun.png);
  background-repeat: no-repeat;
}

.position-percentage {
  background-position: 50% 100%;
}

.position-pixel {
  background-position: 30px 45px;
}

code {
  background-color: #eee;
  padding: 1px 5px;
}