求救痞客邦CSS語法-header背景圖片縮小--20點

求救痞客邦CSS語法-背景圖片縮小

我現在的圖片太大,導致無法全部顯示在header的地方

( http://fereway712.pixnet.net/blog )

有誰可以告訴我,下列語法,要怎麼改,才可以讓我放的圖片,完整的顯示在header呢?

#header {

width:651px;

height:315px;

background-image:url(http://pic.pimg.tw/fereway712/1312547891-ead27ce1f...

background-position:top right;

background-repeat:no-repeat;

margin:7px 0 20px 238px;

}

正確解決我的問題者,贈點~~感謝

2 Answers

Rating
  • Favorite Answer

    Dear Linda ~

    此張圖片的尺寸寬 1,063px、高 638px,您的 #header 區塊大小寬度只有 651px,高度只有 315px!倘若 1,063 x 638 的圖片要在只有 651 x 315 的容器中顯示完整圖像,那麼可以運用 background-size 屬性控制圖片尺寸。如下語法紅字部分:

    #header {

    width:651px;

    height:315px;

    background-image:url(http://pic.pimg.tw/fereway712/1312547891-ead27ce1f...

    background-position:top right;

    background-repeat:no-repeat;

    margin:7px 0 20px 238px;

    background-size:651px 315px;

    }

    ~ 所得結果如下測試畫面 ~

    圖片參考:http://a.imageshack.us/img96/403/53764122.png

    不過,background-size 屬性只有火狐和 IE9 才看得見效果!為了確保不同瀏覽器版本的訪客都能看到相同樣式,建議您使用美工軟體先將圖片縮小至 651 x 315 之後重新上傳圖片,再將圖片網址取代原來 background-image:url() 括弧內的圖片網址即可。例如:

    #header {

    width:651px;

    height:315px;

    background-image:url(http://i.imgur.com/uI2ST.jpg);

    以下省略.....

    }

    倘若這不是您期待的結果,您希望的是 #header 能顯示原圖 1,063 x 638 大小的圖像,那麼則需修改整個版型唷!請複製以下CSS貼在樣式表〝最底部〞空白位置 →〔儲存〕

    #header {

    width:1063px;

    height:638px;

    margin-left:-80px;

    }

    #links {

    margin-top:0px;

    }

    #content {

    margin-top:-20px;

    }

    #banner h2 {

    margin-left:40px;

    }

    #navigation {

    margin-left:40px;

    top:200px;

    }

    #murmur {

    border-bottom:0 none;

    }

    #banner h1 a {

    position:relative;

    left:270px;

    }

    ~ 所得結果如下測試畫面 ~

    圖片參考:http://a.imageshack.us/img221/4730/58159168.png

    #banner h2 是『部落格描述』

    圖片參考:http://tw.img.webmaster.yahoo.com/247611/ystats.gi...

    ,#navigation 是『看照片 讀文章 留言去 關於我』連結區塊,#banner h1 a 是『部落格名稱』,margin-left 的正值越大,文字與連結越往右移;top 的正值越大,則連結越往下移。倘若結果不滿意,請自行修改屬性設定值調整位置。

    以上兩種修改結果,請擇一最合意的效果使用!

    希望對您有所助益~ ^_^

  • 8 years ago

    第壹零壹個問答評價 感謝知識長的回答

    語法問題 要什麼給什麼 想怎樣就怎樣

Still have questions? Get your answers by asking now.