Bootstrap container fill sides with colors

Question

I have the following template using bootstrap :

I'm using a 1200px container for the blue/gray container and the image is 1600px.

I would like to fill the left side of the blue container (400px) with blue and the right side of the gray container (800px) with gray, but the fillers can't go over 1600px. Basically it has to match with the picture above the 2 containers.

Here is what I would like to achieve:

the content has to stay within 1200px, but the background colors must be filled to 1600px.

If I resize the template to 1200ish pixels, it should look like the following picture.

Do you guys have an idea how I could achieve that? Every solution I tried resolve around ditching the bootstrap container and the content get out of line when i resize, which is something I would like to avoid.

Thank you!

EDIT: Here is a bootply example if needed: http://www.bootply.com/APwOkhCfQD

Answer 1

Your current problem is that the image is hardcoded to 1600px width. You have two options:

Make your header completely fluid in width and remove double container wrap you currently have going on:

<div class="container-fluid">
    <div class="container"><!-- delete this -->

Or change the container class width to 1600:

.container {
    width: 1600px;
}

http://www.bootply.com/q35ERYfN7A

Update:

You can also achive the full background color effect via:

.blue-background, .light-gray-background{height: 100vh;}
body{background: linear-gradient(90deg, #004a87 50%, #f2f1eb 50%);}

Answer 2

Use pseudo classes on .service-container and .commitment-container. Position them absolutely and size them at 200px wide and 100% height. Add the background color and voila!

Example:

.service-container::before {
  content: "";
  background-color: blue;
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}