Can't specify img to replace in media queries

Question

I can't specify img in this template I used for my client. I want to put different images on mobile and desktop versions in the background and the inline css does not let me specify the image for some reason I do not know.

This is the html code:

<aside id="colorlib-hero">
        <div class="flexslider">
            <ul class="slides">
                <li style="background-image: url(images/img_bg_3.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-8 col-sm-12 col-md-offset-2 slider-text">
                                <div class="slider-text-inner text-center">
                                    <h2 class=text-bg><span class="mofo">Arbeiten</span></h2>
                                    <h1 class=text-bg><span class="mofo">TRÄUME MIT UNS</span></h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
             </ul>
         </div>
     </aside>

This is the CSS code I would use for replacing the image:

@media (min-width: 601px) {
   #somediv{
       background: url('images/bg.jpg') repeat-x;
   }
}

@media (max-width: 600px) {
   #somediv{
      background: url('images/bg-mobile.jpg') repeat-x;
   }
}

Thank you in advance

Answer 1

You need to use !important; to override inline style. Example:

background: url('images/bg.jpg') repeat-x!important;

Although !important should be used rarely, more information here

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception