2013年10月22日 星期二

background-image repeat not work 插入背景圖片沒有顯示

想要在背景插入一張圖片

不會真的插入 1240px * 700px 這樣大的圖片

而且大部份圖片都是固定重複的

就像你家的壁紙, 是固定花樣, 而且重複的

所以通常會切成一塊最小花樣, 然後像瓷磚一樣重複貼滿

這次遇到問題是插入圖片沒有顯示

原本我是這樣寫的


在css中

.bg {
background-image: url(../images/bg.png);
background-position: left top;
background-repeat: repeat-y;
}


在html 中

<body>

<div class="bg">

<header></header>
xxx

xxx

xxx


</div>

</body>



系統一直反應沒有找到檔案, 放出“html31 parse”訊號

所以我將聯結改成url('bg.png')

將bg 移到和html同個資料夾, 發現也沒作用...


最後改成



在css中

body {
background-image:url('images/bg.png');
background-position: left top;
background-repeat: repeat-y;
}


在html 中

<body>

<div class="bg">

<header></header>
xxx

xxx

xxx


</div>

</body>



對body 元件直接下指令, 然後改路徑為上, 才成功作用了!

最後, w3cschool 上面的碼似乎沒有經常更新, 有些都沒有作用,

之後HTML6出來該怎麼辦呢?



後來發現, 有個更簡單方式
<style>

background-image:url('image/bg.png');

</style>

這樣久結束了(image 是資料夾)