CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
Iggy
Iggy

Reputation: 5251

How to display full page background image on Rails?

I have done some googling and SO-ing; wound up on this Perfect Full Page Background Image article. I also tried using the image on jumbotron as said here, but everything I did gave me the same result. I figured it's not the instruction's fault, but something in my code is hindering the full image. The app is done on Rails. I am using bootstrap-sass gem.

This is what it currently looks like (it looks exactly like this no matter what I do below): https://i.sstatic.net/8RK9j.jpg

If you notice, there is a small white gap between header and the top of the image, and there is a large gap between the bottom of the image to the horizontal line of footer. I want to make the image to cover the whole page (100% cover), something like this or this one.

This is what layouts/application.html.erb look like:

<!DOCTYPE html>
<html>
<head>
  <title>My site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>
<body>
  <p class="notice"><%= notice%></p>
  <p class="alert"><%=alert%></p>
    <%= render 'layouts/header' %>
    <%= yield %>
    <%= render 'layouts/footer' %>
</body>
</html>

I have tried each (separately):

.jumbotron {
    position: relative;
    background: #000 url(../assets/my_image.jpg) center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

and 

<img src="my_image/bg.jpg" id="bg" alt="">

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

I have also tried deleting everything else on application.scss (save the jumbotron code above), but it still looks like the screenshot image.

Footer:

<footer class="footer">
  <div class = "container">
    <div class = "row">
      (some text)    
    </div>
  </div>
</footer>

Header:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
       (some text)
    </ul>
  </div>
</header>

Why does my image not cover 100% screen and how can I fix it?

Upvotes: 0

Views: 3304

Answers (2)

Sagar Pednekar
Sagar Pednekar

Reputation: 334

If images are in assets/img no need to give any path(eg.absolute,relative)

You can try this as well

body {
background-image:url("myImage.jpg");
background-repeat: no-repeat;
background-size: cover;
}

Upvotes: 2

fedesc
fedesc

Reputation: 2610

Well you could add in body some css (unrelated to bootstrap) i.g:

body {
  background-image: url('../path');
  background-position: cover;}

As such:

https://jsfiddle.net/jxw31qtd/

or repeat a smaller background throughout the screen with (repeat-x and repeat-y) as such:

https://jsfiddle.net/24219gj5/

Upvotes: 1

Related Questions