代码如下：
复制代码
<div class=”keith”></div>
复制代码
.keith{
margin:2em;
width:5em;
height:5em;
background:lightgreen url(‘../images/my-icons/Loginicon.png’) scroll no-repeat ;
background-position:right 5px bottom 5px;
};
上面代码中，使用background-position扩展语法即可实现距离右下角5px距离的定位。
3.background-origin定位
background-origin是CSS3中新增的属性，主要用来决定background-position属性的参考原点，即决定背景图片定位的起点。在默认情况下，背景图片的background-position属性总是以元素左上角为坐标原定对背景图片进行背景定位。
background-origin有三个属性值content-box , padding-box(默认值) , border-box 。
看看如何使用这个属性来对背景图片进行右下角5px的定位，代码如下。
复制代码
<div class=”keith”></div>
复制代码
.keith {
margin: 2em;
width: 5em;
height: 5em;
padding: .5em;
background: lightgreen url(“../images/my-icons/Loginicon.png”) scroll no-repeat;
background-position: right bottom;
-moz-background-origin: content;
-o-background-origin: content-box;
-webkit-background-origin: content;
background-origin: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
上面代码中，给盒子设置了padding值。使用box-sizing属性来调整div在浏览器下的盒模型为IE盒模型，border-box的意思是总宽度=content area + padding + border 。这里给background-origin属性设置了content-box，可能大家会不太理解，为什么不是padding-box。看一个火狐下的截图。
上面图片中，黄色区域的是margin，紫色区域的是padding，浅蓝色区域的是content-area。如果给元素设置了padding-box，那么此时图片会定位在右下角，与右下角没有任何空间。所以此时要使用content-box进行定位。最终的效果如下。
4.calc()定位
如果我们希望通过内容来撑开容器的宽度和高度时，而不去固定高度和宽度时，这时需要使用calc属性+background-position属性结合使用，来对图片进行定位。因为这时候并不知道容器的高度和宽度，只能有100%来进行计算。
复制代码
<div class=”keith”>
这是一段文字，用于撑开容器。
</div>
复制代码
.keith{
