CSS定義 - background-Position背景圖位置

CSS版本: CSS1.0 

瀏覽器: 主要瀏覽器都支援 ，但是 記得background-attachment必須為fixed(預設值)才能使用

參數：

• inherit - 繼承parent元件的定義
• x% y% - x%為水平偏移位置(0%=>置左,100%=>置右)，y%為垂直偏移位置(0%=>置頂,100%=>置底)
• xpos ypos - x/y軸偏移位置(ex: 10px 2em,...)
• left/center/right top/center/bottom - 直接指定位置(ex: left center)

範例：

<table width="300px" border="1">
 <tr>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: no-repeat; background-position:center center"></div>
  </td>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: no-repeat; background-position:top 10%"></div>
  </td>
 </tr>
 <tr>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: no-repeat; background-position:right 100%"></div>
  </td>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: repeat-x; background-position:0 center"></div>
  </td>
 </tr>
</table>

結果：

Background-Position因為重複的圖片偏移效果不佳，所以較常搭配background-image:no-repeat使用。