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.
margin: 0 auto;
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.