3

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

fabien7474
  • 16,300
  • 22
  • 96
  • 124

1 Answers1

9

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;
}
Vegard Larsen
  • 12,827
  • 14
  • 59
  • 102
  • Hi, I have tried your solution but it is not working. The pink "stripeContainer" is displayed before the body and not in background. My code is:
    ..
    with style: body #header { height: 120px; background-color: #000000; display: inline-block; overflow: hidden; float: left; margin-right: 0; width: 950px;}     – fabien7474 Oct 28 '09 at 10:28
  • Ok. It works. I needed to add to the stripeContainer style the following : "position: absolute; z-index: -1; width: 100%" Thx – fabien7474 Oct 28 '09 at 11:55