如何在分栏页面中显示背景图片

Question

我正在使用 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?-->
    <!--
    <%= 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 文件中看到的那样，我已经在资产管道中准备好了图像。如果我包含它，它只会填充我页面最中心的列，我希望它覆盖整个页面（但仍保留页眉和页脚）

Answer 1

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

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

如果这是您想要的，则不是 100% 肯定。

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

Answer 2

尝试以下操作：

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。这是为了确保图像也能在开发环境中显示。

如何在分栏页面中显示背景图片

how to display background image across columnized page

ruby

ruby-on-rails

zurb-foundation

ruby-on-rails-4

zurb-foundation-5