Using bootstrap when I resize my browser, the picture that is in the background shrinks and the background color doesn't.

Here is the link to the site which contains the HTML code: http://codedifferently.com/crest.html

Here is the CSS code that I used:

@charset "UTF-8";

/* CSS Document */


/* Move down content because we have a fixed navbar that is 50px tall */

body {
  padding-top: 0px;
  padding-bottom: 20px;
}

div.jumbotron {
  background-image: url('img/chicago2.jpg');
  background-color: #3FF;
  background-size: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

div.navbar navbar-default navbar-static-top" role="navigation {
  border: 0px;
}

    
Answer1:
If I understand correctly, not sure, because the background-color do <strong>NOT</strong> shrink, but I think you mean that your Image should resize and the color should <strong>NOT</strong> appear like when it is now in full view. So If understand that correctly.

Change this:

background-size: 100%;


to

background-size: cover;


and add the browser's vendors to make it cross browser:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;


See more info about <strong>background-size</strong>
    
Answer2:
Your problem comes from your line background-attachment: fixed;. Which makes the background fixed when scrolling, and the background-position is relative to your window. So in the end, your background is centered relatively to your window, not your jumbotron.

see CSS problem with background-attachment:fixed;

<strong>Edit</strong>:
I prefer @dippas's solution.