Responsive Bootstrap Jumbotron Background Image

Question

I m using bootstrap jumbotron  and including a background image  Resizing the screen makes the image tile and repeat  whereas I want the image to be responsively resized    lt div class  jumbotron  style  background-image  url http   www californiafootgolfclub com static img footgolf-1 jpg   background-size  100    gt      lt div class  container for-about  gt      lt h1 gt About lt  h1 gt      lt  div gt   lt  div gt    How would you go about making the image responsive  The site is HERE  Thanks for your ideas

User · Answer

This is how I do     x000D   x000D   lt div class  jumbotron  style  background  url img bg jpg  no-repeat center center fixed  -webkit-background-size  cover  -moz-background-size  cover  -o-background-size  cover  background-size  cover   gt  x000D     lt h1 gt Hello lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You could try this    Simply place the code in a style tag in the head of the html file   x000D   x000D   lt style gt  x000D           jumbotron   x000D              background  url  http   www californiafootgolfclub com static img footgolf-1 jpg   center center   cover no-repeat  x000D            x000D   lt  style gt  x000D   x000D   x000D    or put it in a separate css file as shown below   x000D   x000D           jumbotron   x000D              background  url  http   www californiafootgolfclub com static img footgolf-1 jpg   center center   cover no-repeat  x000D            x000D   x000D   x000D    use center center to center the image horizontally and vertically  use cover to make the image fill out the jumbotron space and finally no-repeat so that the image is not repeated

User · Answer

Unfortunately  there is no way to make the div height respond to the background-size   Easiest solution that I have used is adding an img tag within your jumbotron that contains that background image

User · Answer

The simplest way is to set the background-size CSS property to cover   jumbotron     background-image  url  quot    img jumbotron bg jpg quot      background-size  cover

User · Answer

The below code works for all the screens     jumbotron      background  url  backgroundimage jpg   no-repeat center center fixed     -webkit-background-size  cover     -moz-background-size  cover     background-size  cover     -o-background-size  cover      The cover property will resize the background image to cover the entire container  even if it has to stretch the image or cut a little bit off one of the edges

User · Answer

This is what I did   First  just override the jumbotron class  and do the following     jumbotron      background  url  bg jpg   no-repeat center center       -webkit-background-size  100  100       -moz-background-size  100  100       -o-background-size  100  100       background-size  100  100       So  now you have a jumbotron with responsive background in place  However  as Irvin Zhan already answered  the height of the background still not showing correctly   One thing you can do is fill your div with some spaces such as this    lt div class  jumbotron  gt       lt div class  container  gt          About          lt br gt  lt br gt  lt br gt   lt  --keep filling br until the height is to your liking-- gt       lt  div gt   lt  div gt    Or  more elegantly  you can set the height of the container  You might want to add another class so that you don t override Bootstrap container class    lt div class  jumbotron  gt       lt div class  container push-spaces  gt          About      lt  div gt   lt  div gt    push-spaces       height  100px

User · Answer

TLDR  Use background-size  100  100      background-size  cover  may cut off some parts of the image producing poor results   Using background-size  100  100   you force the image to take up 100  of the parent element for both height and width   See W3Schools for more information on this   Here is a working  responsive jumbotron  background image    lt div class  jumbotron   style  background-image  url http   yourImageUrl jpg   background-size  100  100    gt       lt h1 gt Welcome lt  h1 gt       lt p class  lead  gt Your message here lt  p gt       lt p gt  lt a href  http   www YourLinkHere com  class  btn btn-primary btn-lg  gt Learn more  amp raquo  lt  a gt  lt  p gt   lt  div gt

User · Answer

I found that this worked perfectly for me    jumbotron   background-image  url  img Jumbotron jpg   background-size  cover  height  100      You can resize your screen and it will always take up 100  of the window

[css] Responsive Bootstrap Jumbotron Background Image

Examples related to css

Examples related to twitter-bootstrap

Examples related to responsive-design