ROR：全屏幕背景图片

我已经尝试了不同的选项，也发布在stackoverflow上。但似乎没有任何工作。我在/ public/images中有logo.png文件，在样式表中有一个custom.css文件。ROR：全屏幕背景图片

我想每个页面的背景被logo.png（全屏）

我试着搜索了很多后，以下。但我什么也没得到。背景只是空白。

请帮助而不是repeat-x

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

来源

2011-08-01 Wasi

如果您只是通过浏览器导航到图像，您能看到图像吗？也许这是一个路线或权限问题。 – Mischa

试试'url（'/ images/logo.png'）'。 – RocketR

你肯定不希望使用重复-X 为了说明为什么，使用下面的链接http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image和粘贴下面的代码，看看会发生什么，然后删除重复-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），但我不确定其他浏览器。

来源

2011-08-01 08:29:00 jamesc

把repeat。除此之外，检查图像的路径是否正确。

来源

2011-08-01 07:18:03

这也行不通。图像文件位于/ public/images /中，而css文件位于public/stylesheets /中。所以我认为路径是正确的。 – Wasi

@Wasi yes应该是正确的路径 –

你的CSS是否干净？这是你改变背景的唯一地方吗？还要检查HTML中是否没有任何CSS硬编码。或者最好，检查萤火虫显示值。 –

路径问题？ ^^

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

全屏幕的背景图像：

我发现CSS-技巧的有趣article可能是有用的，笔者提供了一些解决方案。

来源

2011-08-01 08:09:53 Awea

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

来源

2011-08-01 08:17:45 desbest

ROR：全屏幕背景图片

回答

相关问题