0

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!

Seif
  • 566
  • 2
  • 10
  • 21

2 Answers2

1

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.

John Slegers
  • 45,213
  • 22
  • 199
  • 169
0

Try:

background-size:cover;

Or

background-size:contain;
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Didn't work. I'm looking for away to add the bootstrap: img-responsive. I can do that in HTML but don't know how to do it if the image is in CSS. – Seif Mar 19 '16 at 22:56
  • That css won't be dynamic - it won't resize as you resize a window. But it should correctly resize when the page is loaded on different viewports. I think `cover` is the one that you want, but it maintains the image aspect ratio by zooming-in on the image until the entire background of the element is covered. I am unaware at this time of any other method for responsive sizing of background images, but I'll keep looking. – cssyphus Mar 19 '16 at 23:08