Question

如何在Rails 4中包含背景图像？我正在尝试将它添加到我的HTML中的div中。目前，图像位于我的/assets/images目录中。

HTML：

<header>
  <div class="background_image">

  </div>
</header>

CSS：

.background_image {
    background: url(/assets/header-bg.jpg);
}

使用我目前的代码，没有显示图像

Answer 1

首先，您需要添加 CSS 文件 SCSS 扩展名，例如main.css.scss。

您可以使用asset helpers，例如：

.background_image {
    background: image-url('header-bg.jpg');
}

正如文档中所述，image-url("header-bg.jpg")变为"url(/assets/header-bg.jpg)"。

您的标记目前为空（div.background_image），因此您需要在样式中添加一些height才能使其正常工作。

<header>
    <div class="background_image">
        <!-- no content -->
        <!-- add some content or specify some height -->
    </div>
  </header>

注意：为了完成所有这些工作，您必须使用sass-rails gem（it's default in rails 4）。

Answer 2

这是一篇很老的帖子，但我觉得这仍然可以使用更好的答案。在引导程序中调整图像大小非常棘手，因此要根据需要对其进行调整或显示，这需要一些照片希望，但是将代码放到您想要的位置的代码可能如下所示，因为这应该覆盖几乎所有浏览器：

background: url('header-b.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;

此外，您可以根据图像和/或空间的大小来为您的背景添加更多css：

background: url('header-b.jpg') no-repeat center center;

将fixed添加到其中会将图像锁定到位，但可以使用。

在Rails 4中添加背景图像

2 个答案: