How to make a background image responsive in Bootstrap 3.1.1

I'm having trouble getting background images to scale responsively.  I'm using:

HTML:
 <div class="row-fluid">
       <div id="swirl" class="col-md-12  col-centered">
        </div>
 </div>

CSS:
#swirl {
  z-index:1;
  display:block;
  width:305px;
 height:180px;
  background: url("../_img/common/swirl_305x180.png") no-repeat scroll center center;
  background-size: cover;
}
dlearman1Asked:
Who is Participating?
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
You can specify your width in percentage and height: auto for the #swirl selector.
0
 
dlearman1Author Commented:
Edit:
"row-fluid" should be "row"
0
 
Tom BeckCommented:
Any element you want to be responsive should never have a fixed width. You can however set a min-width to prevent it from getting too small.
0
 
dlearman1Author Commented:
After grubbing around for a while, I came up with this solution which works:  https://jsfiddle.net/dlearman/4ogc21cd/

Basically the key points seem to be:

1. You can apply background-size if background-image is specified. It doesn't work if the background shortcut is used.

2. A second empty div is created inside the div holding the background image. Top padding is added to the inside div and sized in % as (image height/image width)*100. This adds fake content that maintains the image shape.  Standard tricks like adding min-height:1px; and &nbsp; don't work
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.