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:

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

#swirl {
  background: url("../_img/common/swirl_305x180.png") no-repeat scroll center center;
  background-size: cover;
Who is Participating?
Alicia St RoseOwner & Principle Developer/DesignerCommented:
You can specify your width in percentage and height: auto for the #swirl selector.
dlearman1Author Commented:
"row-fluid" should be "row"
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.
dlearman1Author Commented:
After grubbing around for a while, I came up with this solution which works:

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