如何跨列页面显示背景图像答案

【问题标题】：how to display background image across columnized page如何跨列页面显示背景图像
【发布时间】：2016-04-27 22:49:29
【问题描述】：

我正在使用 Rails 4 构建一个基本博客。为了美观，我使用了 zurb-foundation gem，它遵循响应式 Web 应用程序中使用的标准网格设计。

我想知道是否可以在整个博客正文中显示背景图像。基本上我只想用图像填充白色区域并将漂亮的小页脚移动到图像的底部。

该博客目前托管在 Heroku 上，地址是 thawing-ravine-8558.heroku.net。

application.html.erb 文件如下所示：

<!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 (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
  <head>
    <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) : "Portfolio by Adam Wanninger" %></title>

    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "vendor/custom.modernizr" %>
    <%= csrf_meta_tags %>
    <%= auto_discovery_link_tag(:atom, posts_path(:atom)) %>
  </head>

  <body>
    <%= render :partial => 'layouts/header' %>

    <div id="main">
    <%= yield %>
    <!--must be set to defaults for windows, no explanation found?-->
    <!--http://stackoverflow.com/questions/16739581/possible-to-get-rails-4-working-on-windows-->
    <%= javascript_include_tag "defaults" %>
    </div>

    <%= render :partial => 'layouts/footer' %>
  </body>
</html>

common.css.scss 文件看起来像这样：

input[type="submit"] {
  @include button;
}

div#main {
  @include grid-row;
  //background-size: cover;
  //background-image: url("architecture.jpg");
}

footer {
  margin-top: 50px;
  background-color: #000;
  color: #eee;
  text-align: center;
  p {
    line-height: 100px;
  }
}

正如您在我的 .css 文件中看到的，我已经在资产管道中准备好了一个图像。如果我包含它，它只会填充我页面上最中心的列，我希望它覆盖整个页面（但仍然保留页眉和页脚）

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-4 zurb-foundation zurb-foundation-5

【解决方案1】：

尝试以下方法：

html { 
  background: image-url(images/your-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

（来源：https://css-tricks.com/perfect-full-page-background-image/）

注意使用image-url 而不是url。这是为了确保图像也能在开发环境中显示。

【讨论】：

【解决方案2】：

您可以将图像作为背景应用到 body 标签，例如 -

body {
  background-image: url('your/asset/link/here')
}

如果这是您的目标，则不是 100% 肯定。

然后将其他各自的样式应用到页眉和页脚，如果需要，可能还应用z-index 以将页眉和页脚背景颜色保持在正文颜色之上。

【讨论】：

这是我尝试的第一件事。它似乎与 zurb 基础宝石的工作方式不同