CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-images
Seif
Seif

Reputation: 646

How to make a background image in CSS responsive? bootstrap

I have this image in css and I want to add bootstrap class: img-responsive to it so it becomes responsive. It's easy if it's in HTML but how to do it in CSS?

#index-jumbotron {
    height: 490px;
    margin-left: 0;
    margin-right: 0;
    background-image: url("../images/Eiffel%20Sunset%203.JPG");

Thanks!

Upvotes: 0

Views: 6317

Answers (2)

John Slegers
John Slegers

Reputation: 47111

Here's how you can do responsive background images in CSS :

body {
   margin: 0;
}

#index-jumbotron {
    background-image: url(http://www.intrawallpaper.com/static/images/City_Landscape_Background_B5hx2zA.jpg);
    background-size: cover;
    padding-bottom: 46.128%; /* <- This value should be equal to height / width */
}
<div>Here goes your menu</div>
<div id="index-jumbotron"></div>
<div>Here goes the rest of your content</div>

(see also this Fiddle)

This works both with and without Bootstrap.

Upvotes: 1

cssyphus
cssyphus

Reputation: 40106

Try:

background-size:cover;

Or

background-size:contain;

Upvotes: 0

Related Questions