Question

I’m starting a new rails project and added twitter bootstrap (since i’ve heard good things about it). This is a beginner question but, how do I add background images that span the entire hight/width of a page without letting twitter-bootstrap’s default top and left padding get in the way? Is there a basic setup I haven’t come across yet? How do I remove that padding for a specific page and yet still let the padding remain in the rest of the app? Is this padding beneficial?

Thanks

Answer 1

You could add the background image to the body, as it would not be affected by the padding

body.my-page{
  background-image: url('my-image');
  height: 100%;
  width: 100%;
} 

or add a absolute/ ‘fixed` positioned container w/ the full width & height and apply the background image to that container.

<div class="bg"></div>
</body>

CSS

.my-page .bg{
  background-image: url('my-image');
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
} 

.my-page .container{
  position: relative;
  z-index: 2;
}