CSS: Two-color background

Question

This might not be the best title, but I am having a hard time trying to find the appropriate one. Basically, what I need is to have a two-color background image, with the breakpoint set to a specific position.

Here's what I have right now:

Which can be tested in this jsfiddle.

And this is what I am trying to achieve:

One thing though, is that the slant in this bar needs to be aligned with the logo, as shown below:

If there was no slant, this might be easier, but I have not found a way to achieve the desired behavior. What I tried doing was creating a div with a background color, and inside that div, a second one that would be placed on top containing the image.

<div class="line-container">
      <div class="line">                
      </div>
</div>

.line-container{
  width: 100%;
  background-repeat: repeat-x;
  background-color: #009b3a;
}
.line{
  background-image: url('http://s8.postimg.org/fc0umdjut/image.png');
  display: block;
  width: 50m;
  margin: 0 auto;
  height: 10px;
}

But position and color to the sides are wrong, as shown in this jsfiddle:

Any advise?

Answer 1

Seems like a job for a gradient.

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg,  #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Simply add this to your css class and change the colors within accordingly.