<!DOCTYPE html>
<html>
  <head>
    <title>background-position: 2-value on top of 4-value</title>
    <style>
body { margin: 0 }
.test1 {
    height: 200px;
    width: 200px;
    background-image:
    url(../../css3/images/resources/red-100.png);
    background-repeat: no-repeat;

    /* Intended to be overwritten: */
    background-position: bottom 0% right 0px;
}
.test2 {
    /* The background-position to be used: */
    background-position: 0px 0px;
}
.ref {
   height: 100px;
   width: 100px;
   top: 0;
   left: 0;
   background-color: green;
   position: absolute;
}
    </style>
  </head>
  <body>
    <div class="test1 test2"></div>
    <div class="ref"></div>
  </body>
</html>