圖像重複不起作用，爲什麼......？

我會開始說我對CSS和HTML是全新的，所以沒有必要讓我失望，OK。圖像重複不起作用，爲什麼......？

這裏是我的HTML：

<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link href="res/yOJCascadeStyleSheet.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="header"> 
      <img src="res/yOJheader.png"> 

     </div> 
    </body> 
</html>

這裏是我的CSS：

root { 
    display: block; 
} 

#header{ 
    background-image: url('yOJ_GIF_Tile.gif'); 
    background-repeat: repeat-x; 

}

現在，yOJ_GIF_Tile.gif被放置在同一文件夾中的HTML，如果我設置背景轉換爲顯示顏色的CSS中的特定顏色。我已經看過關於這個和以前的問題在這裏的StackOverflow上的教程，它看起來像我有其他人一樣的語法，但我不明白它的工作...有人可以幫助我嗎？我知道有HTML CSS &大師的漫遊本站一堆... =）

編輯：我應該指出，其不僅重複不工作時，圖像不顯示在所有。它是一個10像素X 200像素.gif圖像，我想在div背景中水平重複。

謝謝！

來源

2011-02-15 AndroidHustle

的問題可能會更加簡單比您預期，雖然你是中途朝自己的解決方案：

yOJ_GIF_Tile.gif被放置在同一文件夾中的HTML

的問題是，您所提供的url('yOJ_GIF_Tile.gif')路徑是相對的CSS文件，而不是HTML文件。

假設你的CSS文件在同一目錄中的HTML文件的文件夾中，你可以嘗試：

background-image: url('../yOJ_GIF_Tile.gif');

，而不是（在..在文件路徑的裝置，簡單地說，「去到父這個目錄的目錄）。

或者你可以簡單地將圖像移動到同一個目錄中的CSS，當然...

來源

2011-02-15 13:58:44

啊，當然！我沒有想到這一點！我將圖像移動到CSS目錄，現在它完美地工作！謝謝！ – AndroidHustle 2011-02-15 14:04:46

嘗試把GIF在同一目錄中的CSS（而不是HTML）

來源

2011-02-15 13:58:23 Vinze

啊，當然！我沒有想到這一點！我將圖像移動到CSS目錄，現在它完美地工作！謝謝！ – AndroidHustle 2011-02-15 14:03:54

我想參考你的CSS圖像是相對的CSS文件。嘗試把圖像在同一文件夾中的CSS，或更改CSS規則url('../yOJ_GIF_Tile.gif');

來源

2011-02-15 13:58:37

啊，當然！我沒有想到這一點！我將圖像移動到CSS目錄，現在它完美地工作！謝謝！ – AndroidHustle 2011-02-15 14:02:36

文件的搜索路徑通常開始於CSS文件的文件夾。

在你的情況下，嘗試把圖像在同一文件夾CSS或使用相對路徑更改URL。
如果沒有，可能是瀏覽器緩存有問題。如果無法將圖像與CSS文件放在同一文件夾中，請嘗試清除瀏覽器數據。

來源

2012-12-11 22:25:44 wancharle

圖像重複不起作用，爲什麼......？

回答

相關問題