css - background-position percentage not working -

everywhere read says should working fine, reason it's not.

this fix else's issue fixing doesn't matter me, want know why. problem on .br .bg-image. know i'm trying use calc() using simple background-position: 50% doesn't work either.

http://jsfiddle.net/ulaa9fnu/2/

html {    height: 100%;    width: 100%;  }  body {    margin: 0px;    height: 100%;    width: 100%;    overflow: hidden;  }  .bg-image {    height: 600px;    width: 800px;    background-image: url('http://media1.santabanta.com/full1/outdoors/landscapes/landscapes-267a.jpg');    background-size: 100%;    background-repeat: no-repeat;  }  .relative {    position: relative;  }  .containeroverlay {    background-color: rgba(0, 0, 0, 0.6);    height: 100%;    width: 100%;  }  .framesizer {    height: 340px;    width: 300px;    overflow: hidden;    position: absolute;  }  .frame {    background-image: url('http://i.imgur.com/4acixsd.png');    background-repeat: no-repeat;    background-size: 100%;    height: 340px;    width: 300px;  }  .tl {    top: 30px;    left: 30px;  }  .tl .bg-image {    background-position: right 30px bottom 30px;  }  .br {    top: calc(100% - 340px - 30px);    /* height of frame, plus 30px spacing */    left: calc(100% - 300px - 30px);    /* width of frame, plus 30px spacing */  }  .br .bg-image {    background-position: right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px);    /* background position doesn't percentages reason */  }

<div class="bg-image">    <div class="containeroverlay relative">      <div class="framesizer tl">        <div class="bg-image">          <div class="frame"></div>        </div>      </div>      <div class="framesizer br">        <div class="bg-image">          <div class="frame"></div>        </div>      </div>    </div>  </div>

solving problem

after fiddling i've found causing issue. background-position stops working when background big (or bigger) frame contains. why dognose's solution works. removes background-size.

as proof, i've changed css of .br-frame , .br .bg-image following:

.br {     top:calc(100% - 340px - 30px);     left:calc(100% - 300px - 30px); } .br .bg-image {     background-position: calc(100% + 30px) calc(100% + 30px);      /* 100% puts bottom right, + 30px offset .br */     background-position: right -30px bottom -30px;     /* or use */     height: 100%;     width: 100%;     background-size: 800px 600px; } 

this way background-size doesn't equal frame anymore, causing background-position work supposed to.

see fiddle

the why

the reason doesn't work percentages, because background-position depends on background-size, literally. because background-position: 0% 0%; top left, , background-position: 100% 100%; bottom right. if background image big it's containing frame, there no more difference between 0% , 100%.

using theory in combination calc(), is:

calc(100% - 340px - 30px) place right (100%), doesn't move @ all, move total of 370px (-340px - 30px) left.

in case goes right, because prefixed right before calc().