Image background not showing for responsive div

Question

It's a very simple and straightforward code:

HTML markup:

<div class="jumbotron text-center top-jumbotron">
</div>

CSS:

.top-jumbotron {
    background: #ffcc00;
    background-image: url('../../bootstrap/img/home-page-banner.jpg');
    background-size: 100% auto;
    padding: 0px;
    margin: 0px;
    border: none;
}

My image is 2880px wide and shows just fine if I specify the width in px in the CSS. However, I am wary of using hard-coded metrics because I need the div to scale across all displays from mobile to Retina. Is there any way to make the image show up while using a percentage dimension for background-size? I don't want to use the <img> tag in HTML because I will be superimposing some text and other elements over the div; hence the background.

No more background image questions please. Check your answer here: http://stackoverflow.com/a/23970033/2884831 — Tony Wu, Sep 08 '15 at 15:47
Tony Wu: I would love to not ask a question if the solutions offered already worked. Why should I have to use plugins or JS for something that should already be possible using plain CSS? And yes, I have tried all possible plain-CSS solutions provided with no success before posting the question. Thank you for your help though. — TheLearner, Sep 08 '15 at 17:03

chrispollock · Answer 1 · 2015-09-08T15:54:41.207

Change background-size: 100% auto; to background-size: cover;. This will fill the div with the background image.

To center the image use background-position: center;

If you want the entire image within the div you can try background-size: contain; but this will leave empty areas in the div depending on it's size. You may also want to use background-repeat: no-repeat; when using contain to stop tiling.

Also I'm guessing you're specifying the height somewhere else in the css? Otherwise that will need to be added too.

Here's a working example.

score 0 · Answer 2 · answered Sep 08 '15 at 16:05

0

Have you tried using the background-position attribute in your CSS?

Try:

.top-jumbotron {
    background: #ffcc00;
    background-image: url('../../bootstrap/img/home-page-banner.jpg');
    background-size: 100% auto;
    background-position: center center; /*Add this*/
    padding: 0px;
    margin: 0px;
    border: none;
}

answered Sep 08 '15 at 16:05

matt6frey

133
10

Doesn't display anything. It does however, when I use a px value instead of % for background-size which is what I mentioned in the question as well. – TheLearner Sep 08 '15 at 17:01

Image background not showing for responsive div

2 Answers2