2

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;
}
4
  • When you say the background-color doesn't shrink, do you mean the blue behind your image? Commented Oct 5, 2014 at 0:05
  • Yes, do you have any recommendations on how I should resize this? I want it to look like this website: crestonsolutions.com It's built with wordpress but it takes forever to load. It's a static site so I thought it would be better to rebuild it using HTML and CSS. Commented Oct 5, 2014 at 0:09
  • Change background-size: 100% to background-size: cover; in div.jumbotron Commented Oct 5, 2014 at 0:15
  • Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else Commented Oct 12, 2014 at 12:44

2 Answers 2

3

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

Sign up to request clarification or add additional context in comments.

3 Comments

Do I add all of this to the div tag inside my CSS?
Firstly as I said in my answer just replace the 100% for cover, this will make it work in modern browsers, but to make it cross-browser, inside your CSS file in this class you are talking about div.jumbotron add what I said in my question. understand?
This is the correct answer, if you just want the background-size to cover the div you have a fixed height on, which you do (500px on .jumbotron). This will no longer shrink the image, as before. For this you have different options. 1. You can use percentage height (50% etc) so your div (.jumbotron) can shrink in proportion. 2. Use css media queries to set the height of your div (.jumbotron) for different screen sizes. 3. Use an actual image <img> instead of a background-image.
1

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.

2 Comments

that won't be the issue here. removing position:fixed won't fix.
i know, reading your answer again after posting mine gave me a new insight on the problem. I guess I was a bit biased because in my mind having this background fixed was a problem. That's why i upvoted your answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.