Sunday, August 26, 2007

筆記:加入頁首圖片

Step1:先準備一張圖片,上面那張千禧橋的圖片是裁切成1600*160。一般螢幕會看到大約1400*150左右的圖。我的小筆只有8.9吋螢幕,解析度設1024*600,其實只看到一半的圖。不過畢竟很少人的螢幕是這樣,為了適應大部分的螢幕,所以乾脆切成1600*160。

Step2:將圖片上傳到網路空間,並取得圖片的url位置。

Step3:找到#header那段語法,加上background: url(http://頁首圖片的檔案位置);

#header {
margin: 0 2%;
background-color: $headerBgColor;
background: url(http://頁首圖片的檔案位置);
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}

1 comments:

Lynn Chiusaid... said...

謝謝你的教學!
我在一個新的template 加上圖片,結果圖整個跨到文章去,把文章給蓋起來了。但是另一個範本就不會,可見得這是可以改寫的。
請問要怎麼寫才會讓文章隨著標頭圖的大小向下調整?
謝謝你!

圖壓過文章的例子:http://flybelltest.blogspot.com/
套用一個現成的範本,結果圖不會壓過文章了:http://lynn4flybell.blogspot.com/