[css] Responsive Bootstrap Jumbotron Background Image

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.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

How would you go about making the image responsive? The site is HERE. Thanks for your ideas!

This question is related to css twitter-bootstrap responsive-design

The answer is


You could try this:

Simply place the code in a style tag in the head of the html file

_x000D_
_x000D_
<style>_x000D_
        .jumbotron {_x000D_
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;_x000D_
        }_x000D_
</style>
_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.


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.


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.


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:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

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.

<div class="jumbotron">
    <div class="container push-spaces">
        About
    </div>
</div>

.push-spaces
{
    height: 100px;
}

The simplest way is to set the background-size CSS property to cover:

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

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:

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

This is how I do :

_x000D_
_x000D_
<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;">_x000D_
  <h1>Hello</h1>_x000D_
</div>
_x000D_
_x000D_
_x000D_


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.


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to responsive-design

How to make flutter app responsive according to different screen size? Bootstrap 4: responsive sidebar menu to top navbar How to make canvas responsive Putting -moz-available and -webkit-fill-available in one width (css property) Bootstrap 3 - Responsive mp4-video Change hover color on a button with Bootstrap customization iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions? Bootstrap full responsive navbar with logo or brand name text Bootstrap 3 truncate long text inside rows of a table in a responsive way Responsive Bootstrap Jumbotron Background Image