Bootstrap "container" background - html

Question

I've been racking my brains for quite a bit of time but still was not find to find a variant but one I will describe here.
I’m using twitter bootstrap 2.3.2. I wanted to change the background of the "container". When I applied the changes, this image was also the background of "navbar" and "hero-unit".
The same thing you can discover here:
http://getbootstrap.com/2.3.2/examples/hero.html
By setting in the "Inspect Element" of the "container" settings smth like this:
background-image: ('url');
It will not only set the image of the body, but also of the "navbar".
Surely, I clearly understand why, in my case, the background of "navbar" and "hero-unit" are changing, because I got this in the HTML:
<div class="container">
<div class="navbar">
<div class="hero-unit">
</div>
</div>
</div>
But what I need, is that the "hero-unit" and the main content "container" were on one line (as on the link provided above). If they are applied to the "container" class it works, but the background is fairly. What properties do I have to apply to the new class, so as they are of equal size (see the link). I think I'm stuck a bit and badly need some support.
I guess I gotta create two new classes? One for the equal display of the "container" and "hero-unit" and "navbar" and the other (with same property of width) to set the background. But I cant figure it out:(

Answer 1

There's an easy fix for your issue.
Use proper markup. It makes no sense to put a hero-unit inside of a navbar and after that put said navbar inside of your container.
<div class="navbar">
<!-- Other stuff -->
</div>
<div class="container">
<div class="hero-unit"></div>
</div>
This is the markup you should use. Then you can create a separate class with your CSS properties and add that class to your DIV with the container class.