背景图像在应用程序布局中不起作用，但在其他页面中起作用答案

【问题标题】：Background image not working in application layout, but working in other pages背景图像在应用程序布局中不起作用，但在其他页面中起作用
【发布时间】：2014-06-20 17:05:22
【问题描述】：

我想在我的所有页面中放一张背景图片，当我简单地添加时

<style>
html{background-image:url(/images/background.jpg);}
</style>

到我想要的页面，它可以工作，但是当我将它放在 Application Layout 或 application.css.scss 中时，它不起作用。

我正在使用 Ruby on Rails，Zurb-Foundation Gem。

在我的应用布局中：

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
  <head>
  <title>Leqra.ma</title>
    <meta charset="utf-8" />

    <!-- Uncomment to make IE8 render like IE7 -->
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/custom.modernizr" %>
    <%= csrf_meta_tags %>

<%= yield :head %>
  </head>
<body>
    <header>
    </header>
       <main role="main">
          <!-- before yield -->
        <%= yield %>
          <!-- after yield--> 
       </main>
  <%= javascript_include_tag "application" %>
</body>
</html>

PS : 我删除了 scaffolds.cs.scss ，我知道基础会覆盖 html 和正文样式。我试图修改 $body-bg in foundation_and_overrides.scss ，但它似乎没有成功。

============================================= ===============================

更新 #1：

我好像找到了临时解决办法，我放了

html{
  background-image:url(/images/background.jpg);
}

在 Scaffolds.css.scss 中。

但我仍然想知道为什么放在 application.css.scss 中它不起作用

【问题讨论】：

标签： css ruby-on-rails background-image zurb-foundation

【解决方案1】：

试试这个：

 html{background-image:url(/images/background.jpg) !important;}

【讨论】：

是的，先生，它正在工作！ .你能简单解释一下发生了什么吗？
当然。您的 html 标记应用了其他一些 css 背景规则，这就是您无法应用规则的原因。使用 !important 你可以告诉 css 使用你的规则而不是另一个。
有道理，我所要做的就是发现它。谢谢。