Use shorthand class .bg-{position} to control background position.
<div class="bg-gray-lighter bg-t bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-r bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-b bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-l bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-c bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-lt bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-lb bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-rt bg-no-repeat" style="background-image:url(bg.jpeg);"></div>
<div class="bg-gray-lighter bg-rb bg-no-repeat" style="background-image:url(bg.jpeg);"></div>.bg-t
.bg-r
.bg-b
.bg-l
.bg-c
.bg-lt
.bg-lb
.bg-rt
.bg-rb