CODEWITHSUNDEEP
htmlcssmedia-queries
Michael Lesko
Michael Lesko

Reputation: 21

Media query not working to swap out background image

Gosh not even sure how to ask this. I have a slideshow, with currently only one slide, that displays the background main image of my website. I'm trying to create a media query that will swap out the large background for another image, better suited for mobile. I "seem" to have created a query that's working but it doesn't replace the main image, it loads my new image "behind" the main image. ???

Here is the HTML..

<div id="home">                 
  <div class="tp-banner-container">
    <div class="tp-banner" >                
      <ul>
          <!-- THE FIRST SLIDE -->
            <li data-transition="zoomout" data-slotamount="1" data-masterspeed="700">
            <img src="images/1.jpg" alt="" />

}
                            <!-- THE CAPTIONS IN THIS SLIDE -->
                            <div class="caption big-text lft"  
                                 data-x="center" 
                                 data-y="350"
                                width="10px" 
                                 data-speed="700" 
                                 data-start="700" 
                                 data-easing="easeOutExpo">
                                    <div class="big-text"><span4>YOUR IDEAS REALIZED</span4></br><div><a class="button3 scroll" href="#contact">CONTACT US</a></div></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

And here is my media query

@media only screen and (min-width: 320px) and (max-width: 414px) {
.tp-banner-container .tp-banner >ul >li .tp-bgimg:nth-child(1) {
        background:url('../images/1_mobile.jpg') no-repeat center center;
}}

According to the inspector on my browser, it "seems" like it worked but loads behind the main image. Hopefully you can see this screen capture...

enter image description here

Anyone know what I need to do to make the mobile background replace the one the slideshow is trying to load? Any information is greatly appreciated!

Upvotes: 0

Views: 983

Answers (2)

sn3ll
sn3ll

Reputation: 1685

From what I can see in the image(and its difficult to really know for certain from an image) you have two background-image css properties on the same element, one inline in the html, and one in the media query. Whenever there are two conflicting css properties, the inline one always takes precedence. If you cannot change the inline background-image property, try adding !important to the media query, but that may not work either. Cant check myself on an image. But that is the cause of your problem.

Upvotes: 3

catbadger
catbadger

Reputation: 1822

If there's javascript happening on it, you may need to override each background attribute individually as opposed to just using a single line "background" attribute.

Upvotes: 0

Related Questions