Search code examples
ruby-on-railsrubyruby-on-rails-4zurb-foundationzurb-foundation-5

how to display background image across columnized page

I'm building a basic blog using Rails 4. For aesthetics, I'm using the zurb-foundation gem, which follows the standard grid design used in responsive web apps.

I was wondering if it is possible to display a background image across the entire body of the blog. Essentially I want to just fille the white area with the image and move the nice little footer to the bottom of the image.

The blog is currently hosted on Heroku at thawing-ravine-8558.heroku.net.

The application.html.erb file looks like this:

<!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>

And the common.css.scss file looks like this:

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;
  }
}

As you can see in my .css file, I already have an image ready in the asset pipeline. If I include it though, it only fills in the very center-most columns on my page, and I would like it to cover the entire page (but still leave the header and footer)

Solution

  • Try the following:

    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;
}

    (Source: https://css-tricks.com/perfect-full-page-background-image/)

    Note the use of image-url rather than url. This is to make sure that the image gets displayed on development environment as well.