Как отобразить фоновое изображение на странице с колонками

Я создаю базовый блог с использованием Rails 4. Для эстетики я использую гем zurb-foundation, который соответствует стандартному дизайну сетки, используемому в адаптивных веб-приложениях.

Мне было интересно, можно ли отобразить фоновое изображение по всему телу блога. По сути, я хочу просто скруглить белую область с изображением и переместить симпатичный маленький нижний колонтитул в нижнюю часть изображения.

В настоящее время блог размещен на 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://stackru.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, у меня уже есть готовое изображение в конвейере ресурсов. Однако, если я включу его, он заполняет только самые центральные столбцы на моей странице, и я хотел бы, чтобы он занимал всю страницу (но все равно оставлял верхний и нижний колонтитулы)

Источник

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, Это сделано для того, чтобы изображение отображалось и в среде разработки.

Источник

Вы можете применить изображение в качестве фона к тегу body, например:

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

Не на 100% положительно, если это то, что вы собираетесь.

А затем применить другие соответствующие стили к верхнему и нижнему колонтитулам и, возможно, z-index если необходимо, чтобы цвета фона верхнего и нижнего колонтитула были выше цвета тела.

Источник
Другие вопросы по тегам