Twitter bootstrap background behind the navbar - html

Question

I have a navbar with a navbar-wrapper class which makes it floating at the top center of the browser. I'd like to have a rectangle zone behind it filled with blue color. How should I do it?
Consider this page http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
I'd like to add a blue filled area before body and behind the navbar.
UPDATE
I have managed to do something similar to what I wanted by adding an empty jumbotron at the beginning of the body and by setting
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
}
The problem is that it has rounded corner and the two top corners leave an annoying white space as you can see http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
Any idea on how to work around it?
UPDATE
It was easy
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
border-radius:0px;
}

Answer 1

assuming your navbar-wrapper class is 'navbar-wrapper'
.navbar-wrapper {
background-color: blue;
}
or, if like the example you link to
.navbar {
background-color: blue;
}

Answer 2

The basic idea for this might be using z-index. You said, before the body and behind the navbar.
Try this:
body {
// write body font, font-size, color etc
}
Then you can use z-index to make the navbar float over it (But remember, each element always floats over the body, so you don't need this; but still if you want to use it)
.navbar {
z-index: 2; // 2 to make sure, that others stay under it always
background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}
After using this, the navbar will have a rectangular div floating behind.
Note: This will be the background for whole of the div, not for just a small portion of it.