Bootstrap CSS/HTML background image resize

问题

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

回答1:

If I understand correctly, not sure, because the background-color do NOT shrink, but I think you mean that your Image should resize and the color should NOT 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 background-size

回答2:

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;

Edit: I prefer @dippas's solution.

来源：https://stackoverflow.com/questions/26198333/bootstrap-css-html-background-image-resize