bootstrap responsive background

[Ginglowng]

I am trying out bootstrap for pretty much the first time and I am having some trouble. I created a nice header background. It’s 680px tall. My html looks like this

Then in my css I did this

#header {
background image url
min-height: 680px;
background-size: 100% auto;
}
This does give me a responsive background but it also cut the bottom of my image off. So now I would need to up the min-height by a few more hundred pixels which isn’t right. What did I do wrong?

[JeroenR]

When the proportions of your image don’t match the container it is in, you have to choose what to do with the image.
Use cropping, or use the best fit method.
Try the different settings of the background-size, especially contain and cover.

[Author]

Posts