Question

Not sure that the title is really describing what I am trying to do. Actually, this is quite simple and widespread usage over the internet :

I want in the background some liquid/full width of stripes (with the same height of some div of the design) while my content is using a Blueprint fixed-grid.

For instance, this website : intient.com is doing exactly what I am looking for. A background stripe in black (and another one in grey) that is liquid width and the content using a grid (but not Blueprint after having a look at the CSS)

I am using a Blueprint fixed-width grid (950px) for displaying any content.
Do you know how I can do that? With Blueprint? And without a static background image…

Thanks

Answer 1

In Blueprint, you do this:

<div class="stripeContainer">
   <div class="container">
     <div class="span-8">Column 1</div>
     <div class="span-8">Column 2</div>
     <div class="span-8 last">Column 3</div>
   </div>
</div>
<div class="container">
  <div class="span-12">Body goes here</div>
  <div class="span-12 last">Some sort of menu perhaps</div>
</div>

Then you style .stripeContainer:

.stripeContainer
{
    width: 100%; /* this is usually implied */
    background-color: pink;
}