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


so i'm using cycle2 slider , seems slider notorious injecting bad inline styles.

to combat have added inline styles !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 override background size in main rule

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

i use cover first 2 slides, , want use contain third. i've tried adding class called contain background-size: contain !important no luck..

you can see slider live http://cirrusfitness.com on 3rd slide (fathers day image). when resize browser in chrome, safari , ie image adheres contain rule not when resizing in firefox...

it appears neither cover initial rule or contain inline styling working.

any suggestions?

added second class of item1 exact rules item background-size: contain , wala!!!


Comments

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

javascript - oscilloscope of speaker input stops rendering after a few seconds -