在Rails 4中添加背景圖像

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 。

有了它，您可以使用資產助手 ，例如：

.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（ 它是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將鎖定您的圖像，但可以使用。