图像重复不起作用，为什么......？

我会开始说我对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

图像重复不起作用，为什么......？

回答

相关问题