Fluid divs around image

Question

I want to have a shape under website logo but it needs to be continued from both sides by orange bars so it would look as a one piece. Here is the preview that I've created so far.

I'm stucked on this for hours. Please do you have idea how to accomplish that and keep it responsible? Thank you!

Here is how it should look like.

Answer 1

Set the background color of .test to the solid color in your background image, then position it properly. Lastly set the logo to position: absolute (don't worry it wont move unless you give it a position) then set the z-index: 2; to raise it above the squiggle.

( Demo )

.test {
    position: relative;
    background-image: url('//jumbo.elique.cz/img/navbar-bottom.png');
    width: 345px;
    height: 34px;
    top: 64px;
    background-color: #0b1b33;
}
.navbar-brand {
    position: absolute;
    z-index: 2;
}

Now this may cause the background color to cover up some of the busses in the background, to fix this you can wrap the nav in a 100px tall div with the same background-color, making this more uniform

( Demo )

.wrap {
    background-color: #0b1b33;
    height: 100px;
}