Bootstrap CSS/HTML background image resize

Question

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

When you say the background-color doesn't shrink, do you mean the blue behind your image? — Alan Dunning
– Alan Dunning, 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. — cbandara
– cbandara, Commented Oct 5, 2014 at 0:09
Change background-size: 100% to background-size: cover; in div.jumbotron — Alan Dunning
– Alan Dunning, Commented Oct 5, 2014 at 0:15
Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else — Daniel Cheung
– Daniel Cheung, Commented Oct 12, 2014 at 12:44

dippas · Accepted Answer · 2014-10-05 00:16:25Z

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

edited Oct 5, 2014 at 0:16

answered Oct 5, 2014 at 0:10

dippas

60.8k15 gold badges125 silver badges134 bronze badges

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

3 Comments

cbandara Over a year ago

Do I add all of this to the div tag inside my CSS?

dippas Over a year ago

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?

Alan Dunning Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:02:27Z

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.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Oct 5, 2014 at 0:21

Antoine Combes

1,4448 silver badges13 bronze badges

2 Comments

dippas Over a year ago

that won't be the issue here. removing position:fixed won't fix.

Antoine Combes Over a year ago

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.

Collectives™ on Stack Overflow

Bootstrap CSS/HTML background image resize

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related