1

I am creating a website with Twitter Bootstrap and there is a white space at the bottom of the page i.e. I cannot get the background image to cover the entire page without there being whitespace at the bottom.

    div.background {
        background: url(http://i1068.photobucket.com/albums/u441/mr_ed_williams/leo1_zpsfbc5d2a3.jpg) no-repeat center top;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 874px;
    }

If you enlarge the run window in this JS Fiddle( http://jsfiddle.net/Ff4Nr/1/ ) and scroll the window you can see what I mean.

All suggestions welcome?

Ed Williams
  • 2,447
  • 3
  • 15
  • 21

1 Answers1

0
body{
    margin:0px !important;
    padding:0px !impoortant;
}

Either add this line of code to your css, or find the body of the original bootstrap CSS. I think that might solve the issue your struggling with.

Woltzor
  • 29
  • 5
  • This is quite 'brute force' and not the recommended way to go. – Jan Doggen Mar 04 '15 at 11:18
  • Most people that works with bootstrap, is making a new Css, adding it below the original css, then making their adjustments there :) – Woltzor Mar 05 '15 at 07:43
  • I'm not talking about adding CSS, I'm talking about the use of *!important*. There are [some valid use cases](https://css-tricks.com/when-using-important-is-the-right-choice/), but it's [advised against](http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css) because [it screws up your CSS hierarchy](http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/) and makes maintenance difficult. Use *!important* only as a last resort, not as an excuse for "I have no patience for digging into the CSS and correcting the actual issue". – Jan Doggen Mar 05 '15 at 08:38