Question

好的，这是我的文件结构：

+ WWW

index.html
style.css
map.jpg

CSS：

body {
    background: #000 url('map.jpg') repeat/repeat-x/repeat-y/no-repeat scroll/fixed top/center/bottom/x-%/x-pos left/center/right/y-%/y-pos;
}

HTML：

<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
</body>
</html>

问题：map.jpg不会在任何浏览器（Firefox，Safari）或TextMate预览中显示！

Answer 1

这里有两个问题，首先是你的CSS关闭，它不应该为那里留下的每个参数的选项清单：

body {
  background: #000 url('map.jpg');
}

然后你的<body>没有任何内容，所以它没有任何尺寸，你需要在那里放一些东西，看看是否有任何图像，否则如果不是0，<body>元素的高度将非常小，具体取决于浏览器。

Answer 2

body {
    background: #000 url('map.jpg') no-repeat top left;
}

您使用的示例显示了所有可能的选项值。

Answer 3

这看起来不像有效的CSS，您是否忘记删除不需要的部分？

尝试这样的事情：

body {
    background:#000 url('map.jpg');
}

Answer 4

尝试添加overflow:hidden;。这对我有用。

Answer 5

我正在使用wamp ...并且它可以与相对url一起使用。

body{
    background:url(../image/circle.png) no-repeat; 
}

这绝对有用。

Answer 6

尝试摆脱你的css中的所有额外垃圾：

body {
    background: #000 url('map.jpg');
}

Answer 7

确保图像与css文件所在的文件夹相同。

background：url（'example.jpg'）;不行！

7 个答案: