Firefox not recognizing background-size: cover with Cycle2 Slider injections

Question

So I'm using the Cycle2 Slider and it seems that the slider is notorious for injecting bad inline styles.

To combat this I have added inline styles with !important:

<!-- BEGIN .item -->
    <div id="fullBanner" class="item contain" 
       style="background-image: url('{{ 'slider-item-4.jpg' | asset_url }}'); 
       background-size: contain !important;">   

    <!-- END .item -->
    </div>

These styles are to override the background size in the main rule

.main-slider .item { height: 450px; width: 100%; background-position: top center; 
background-repeat: no-repeat; background-size: cover;}

I use cover for the first two slides, and want to use contain for the third. I've also tried adding another class called contain with background-size: contain !important but no luck..

You can see the slider live a http://CirrusFitness.com on the 3rd slide (Fathers Day Image). When I resize the browser in Chrome, Safari and IE the image adheres to the contain rule but not when resizing in Firefox...

It appears neither the cover from the initial rule or the contain from the inline styling are working.

Any suggestions?

Answer 1

Added a second class of item1 with the exact rules as item but with background-size: contain and wala!!!