In Rails / bootstrap, why isn't the background image stretching properly?

Question

I am using bootstrap and rails. I am trying to have a background image take up the entire background and stretch when the browser is larger. This is working for the most part, except when the browser is smaller the bottom of the image goes up and the bottom of the browser screen is blank. Here is the css I have now:

body { 
  background-image: url('bilde.jpg');
  background-repeat: no-repeat;
  background-position: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

I have tried this:

body {
  background-image: url('bilde.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

but it does not work either. Does anyone have an answer for this problem? Thanks.

I am running it locally, but here is a jsfiddle: http://jsfiddle.net/QGJv6/ — Philip7899, Oct 14 '13 at 14:32

score 2 · Accepted Answer · answered Oct 14 '13 at 14:44

2

I figured it out. The difference was that I should have been using

background: url('bilde.jpg') no-repeat center center fixed;

instead of

background-image: url('bilde.jpg') no-repeat center center fixed;

Pretty subtle but the change did the trick.

answered Oct 14 '13 at 14:44

Philip7899

4,599
4
55
114

In Rails / bootstrap, why isn't the background image stretching properly?

1 Answers1