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:

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;



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


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>


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.

人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:Bootstrap CSS/HTML background image resize