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 f

Answer 1

I answered a very similar question before.

Put the blue background color on the outer wrapper of container, and add a pseudo element to the right side with the light gray background.

.light-gray-background:before {
    right: -999em;
    background: #f2f1eb;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

Demo: http://www.codeply.com/go/Cdnjz5CH5M

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;
}

Answer 3

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%);}