背景屬性--Part 2

背景的四大屬性, 位置的部分, 可以運用三種方式搭配x軸與y軸的設定:

1. top, bottom, center, left, right
2. x% y%
3. xpos ypos

這三種方式可以組合搭配, 而不是一次只能用其中一種方式來表達。
例如:
background: url(mygirl.jpg) no-repeat left 20px;
背景圖會齊左並從y位置20px之處顯示一次背景圖。

background: url(mygirl.jpg) no-repeat 30% center;
則會在視窗寬30%之處上下居中顯示一次背景圖。

外部檔案 (URL) 路徑的設定

設定背景圖或者是css外部樣式檔時, 一定會運用到url這個屬性, 通常圖檔存放的位置, 不一定會與網頁檔案相同, 在此便需指定檔案存放的路徑位置, 例如:
background: url(mynoteimg/faint.jpg) 100% top;
即影像檔放在網頁所在目錄的次目錄 mynoteimg之下, 可以不必從根目錄寫起。
或者是
background: url(http://myblog/faint.jpg) no-repeat;
URL列出完整的網址。

背景屬性

要設定背景，可利用CSS background properties來完成，它可控制某一元素的背景顏色 (background-color) 、 設定背景圖 (background-image)、水平或垂直地來重複背景影像 (background-repeat)、或是把影像放在頁面的某一位置(background-position)。
若嫌個別設定這些屬性很麻煩，還可以用background屬性，一次做完所有相關的設定。
例如：
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; background: url(arrow.gif) 100% 100% no-repeat;}

則會在ID為sidebar的div中，在其右下角的位置加入單一的arrow.gif背景影像。
延伸應用:
由於arrow.gif是div內的背景，若要讓它看起來突出於內容之外，可以利用padding屬性，加大底部的padding，使圖形看起來好像是落在內容的下方。例如：
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; background: url(arrow.gif) 100% 100% no-repeat; padding: 0 0 15px;}
詳細屬性可見：w3schools的解說