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.

<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!

dealing with the proper size on the image is a very important step. I have found that using sketch3 has alleviated many of those issues. — Winnemucca, Jun 26 '15 at 02:42

score 92 · Answer 1 · edited Jul 24 '20 at 12:46

92

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

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

edited Jul 24 '20 at 12:46

Edric

24,639
13
81
91

answered Nov 18 '14 at 16:03

Steve

1,182
1
11
25

1

I'm using cover for the background-size, but in my case, the client wants the full height of the image always visible. When the screen width extends beyond the width of the jumbotron image, they want the image to expand to greater than 100% width and height. – user3120861 Jul 15 '20 at 21:12

Fadils · Answer 2 · 2015-03-20T07:28:30.533

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

score 8 · Answer 3 · answered Jun 25 '15 at 10:40

8

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.

answered Jun 25 '15 at 10:40

Justin

954
4
22
44

And I would only add `min-height: 300px;` – Pathros May 24 '16 at 20:31

score 8 · Answer 4 · answered Jun 06 '16 at 13:44

8

This is how I do :

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

answered Jun 06 '16 at 13:44

JustRocca

81
1
1

1

Please add more details to your answer :-) – node_modules Jun 06 '16 at 13:55
I didn't change the .jumbotron class on the css (or anything else). I just add this style directly on the html file, as I had wrote. – JustRocca Jun 07 '16 at 17:53
This approach is a much better than modifying the CSS because the jumbotron usually only appears once on a website Also, by having the settings inserted inline, it enables programmatic generation of the code as is the case with my framework. I have a jumbotron() function that insert random images into the jumbotron every time the page is generated. This allows the creation of a nice randomness on the site without having to use the carousel – JG Estiot Dec 14 '17 at 06:32

score 6 · Answer 5 · answered Jan 31 '19 at 23:13

You could try this:

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

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

or put it in a separate css file as shown below

        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }

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.

maxshuty · Answer 6 · 2022-06-11T10:44:20.387

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>

score 2 · Answer 7 · edited May 23 '17 at 12:26

2

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.

edited May 23 '17 at 12:26

Community

1
1

answered Feb 24 '14 at 23:14

Irvin Zhan

824
4
12

score 2 · Answer 8 · answered Feb 13 '18 at 19:57

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.

Responsive Bootstrap Jumbotron Background Image

8 Answers8

Linked

Related