Question

我尝试了不同的选项以及stackoverflow上发布的选项。但似乎没有任何效果。我在/ public / images中有logo.png文件，在样式表中有custom.css文件。

我希望每个页面的背景都是logo.png（全屏）

经过大量搜索，我尝试了以下内容。但我一无所获。背景只是空白。

请帮忙

 body{
 background: url('../images/logo.png') repeat-x ;
 text-align:center;
 color:#fff;
 }

Answer 1

而不是repeat-x放repeat。除此之外，检查图像的路径是否正确。

Answer 2

路径问题？ ^^

如果您只是导航到它，可以看到您的图像吗？如果没有尝试使用firebug来查看问题并轻松解决问题。

全屏背景图片

我发现一个有趣的article关于css-tricks可能有用，作者提供了一些解决方案。

Answer 3

有一个我用于全屏背景图像的JQuery插件，它被称为bgStetcher。您可以使用它来拉伸背景图像以填充屏幕。这样的事情无法在CSS中完成。

Answer 4

你绝对不想使用repeat-x 为了说明原因，请使用以下链接http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image并粘贴下面的代码，看看会发生什么，然后删除repeat-x并查看结果

<html>
<head>
<style type="text/css">
body {
  color: white;
  background:url('paper.gif') repeat-x;
}
</style>
</head>

<body>
<h1>Hellos World!</h1>
</body>

</html>

如果在删除repeat-x后没有显示图像，则很可能是路径问题（正如其他人已经指出的那样）或图像不良。

唯一的另一件事是，如果你的css中定义了其他类/ div，它们会覆盖你在正文中设置的背景属性。其他人建议你使用萤火虫。我必须全心全意地同意。在处理HTML和CSS问题时，Firebug非常重要。

Firebug适用于Chrome和Firefox浏览器（Firefox作为插件，默认情况下为Chrome），但我不确定其他浏览器。

ROR：全屏背景图像

4 个答案: