CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
spinners
spinners

Reputation: 2679

How can I wrap my bootstrap containers so I can have a scaling image background?

I have a typical bootstrap layout like this 

  <body>
    <div class="container">
      ...
    </div>
    <div class="container">
     ...
    </div>
 </body>

but I want to do this

  <body>
    <div class="bg-img">
      <div class="container">
        ...
      </div>
      <div class="container">
       ...
      </div>
    </div>
  </body>

The basic background color will be a soilid color but I want a background image for the main content. I would like the background image to scale appropriately with the responsive aspect of the framework.

I basically want to know if this is advisable?

Upvotes: 4

Views: 8842

Answers (2)

mtt
mtt

Reputation: 1717

Use just one container and then you can nest your rows into it.
html:

<div class="container">
<div class="row bg-img">
    <div class="col-xs3">...</div>
    <div class="col-xs3">...</div>
    <div class="col-xs3">...</div>
</div>
<div class="row bg-img2">
    <div class="col-xs-6">...</div>
    <div class="col-xs-6">...</div>

</div>

css:

.bg-img {
    background-image:url('http://placehold.it/200x200');
    background-repeat:repeat-x;
    background-size: 100%;
}

.bg-img2 {
    background-image:url('http://placehold.it/200x200/fc43c');
    background-repeat:repeat-x;
    background-size: 100%;
}

http://jsfiddle.net/8y9Hr/3

Upvotes: 4

jingtao
jingtao

Reputation: 513

By "scale appropriately", I suppose you mean you have an image of e.g. 1000px wide, and if the window is narrower than 1000px, you want the image to shrink to fit the width of the window.

You can use the CSS background-size property, however this won't work in IE8 and below.

Example which resizes the background image to fit the width of the screen, where image height is calculated automatically while maintaining proportions:

.bg-img {
    background: #f00 url('image.png') no-repeat center top;
    background-size: 100% auto;
}

You can use media queries to set a different size image to avoid e.g. mobile devices loading a 2000px wide image and resizing it.

Reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 0

Related Questions