背景裡如果有單一圖片或是標誌時，我們常常會要固定放在背景的某個角落，此時需要用到background-position 去指定背景圖的位置。

background-position 的 keyword 值能指定方形的四個角落做定位點，預設是左上角。

只設定單字的話背景圖會貼齊邊界，這樣不好看，我們會想要在之間空出一些空間，叫做 offset。

在 CSS 2.1 裡這種要求不好做，因為 offset 只能以左上角為定位點。

在固定寬高的容器裡還算好解決，把容器的尺寸減去 offset 的值就行了。

如果不幸容器是動態尺寸的話，我們就只能抓一個大概數字，比 100% 小一點點，不過這樣在不同尺寸上看起來就會產生差異。

用 CSS 3 有以下三種方法

Extended background-position

CSS 3 background-position keyword 後面可以接數值，以指定和該邊界的距離。IE 9 就已經開始支援。

需要向下相容的話可以在 background shorthand 加上 keywords。

background-origin

也是 IE 9 就開始支援。

我們在上面用 keyword 指定方位，但有沒有想過它們的基於哪個原點所定位的呢？

對 box model 熟悉的話，應該馬上想到每個容器共有4個 box: margin box, border box, padding box, content box.

容器的長寬預設是以 padding box 的尺寸計算，background-origin 同樣也是以 padding box 當做邊界。這樣做是為了不讓 border 蓋到背景。

所以我們可以將 background-origin 指定為 content-box，然後用 padding 做出 offset 的效果。

calc()

最後一個方法，在 offset 的值也可以使用 calc() 動態計算。