CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
Nappstir
Nappstir

Reputation: 995

Responsive background image - bootstrap jumbotron with Ruby on Rails

I have been searching for quite sometime and at this point feel that I am wasting it by not presenting my current situation. I am trying to create a landing page for a website with a responsive background image. I am not having issues with the responsiveness of the width of the image. It will stretch and respond to the scaling of the web browser. However, I cannot get it to fit the height of the web browser. In fact, it only goes about 1 inch down from the top of the browser and no further. I have looked at MANY solutions but most suggest things I have already done. As a side not, I am trying to do this using Rails. I have created a root static-page#home and am working inside the static-page folder in home.html.erb and the static_pages.css.scss. Here is my code:

home.html.erb:

<div class="jumbotron debug">
 <div class="container">
 </div>
</div>

static_pages.css.scss:

.jumbotron {
  background: url(http://www.wolmer.lt/wp-content/uploads/2013/12/tree-of-light-daughter.jpg) no-repeat center center;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
}

Now the background-size: 100% 100%; should be the line that initially scales the image to 100% height and 100% width if i'm not mistaken. I am still having no such luck with it. I have even tried to set html and body tag to height: 100% and that did nothing. Maybe I am missing something. Any help would be greatly appreciated.

One thing I have tried that is a fix.. but not necessarily a solution. I have set the background-size to cover and given my image a set height. This can work but it defeats the purpose as the height is not responsive. All in all, the main issue is I just cannot set the height of the jumbotron class to 100%. Setting html, body { height: 100%; } does not seem to help either.

Upvotes: 1

Views: 996

Answers (2)

Nappstir
Nappstir

Reputation: 995

Alright, I was able to actually find out why setting the jumbotron height to 100% wasn't working and why setting html, body { height: 100%; } wasn't working. The problem was that html and body weren't 100%, so when I set the jumbotron class to 100% height, it would only fill in 100% of what the html/body were at. When setting html/body to 100% height it would increase the height to the window size, but the jumbotron class would stay at it's normal height of 96px(which came because of the container div inside of the jumbotron div. So when I set jumbotron class to height of 100% AND html/body it worked.

That may or may not make sense, but that was the solution to my problem. Thank you for those who helped in anyway.

Upvotes: 0

trh
trh

Reputation: 7339

This happens because the container itself is empty. It's happy to provide a background image to fill the space, but the space in this case is empty.

So , to fix it, make sure the page height is always the height of the browser.

# css style
html,body { height: 100%; }

.jumbotron {
  background: url(http://www.wolmer.lt/wp-content/uploads/2013/12/tree-of-light-daughter.jpg) no-repeat center center;
  background-size: 100% 100%;
  height: 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
}

Upvotes: 1

Related Questions