CODEWITHSUNDEEP
javascripthtmlcssmedia-queriesresponsive
Binarian
Binarian

Reputation: 12446

How to replace a background image of a div, while choosing the matching responsive image file?

I have a website with a responsive background image for a div.

I choose which size of the image to take through @media queries.

The div in question in the code has the id banner-div.

HTML: 
<div id="header-div">
    <div id="background-clipped-div">
        <div id="banner-div">
            <div id="scroll-down-div" onclick="scrollToMainContent()">
                <i class="fas fa-angle-down"></i>
            </div>
        </div>
    </div>
</div>
CSS: 
@media only screen and (max-width: 480px) {
    #banner-div {
        background-image: url(images/background-1-small.png);
    }
}

@media only screen and (max-width: 768px) {
    #banner-div {
        background-image: url(images/background-1-medium.png);
    }
}

@media only screen {
    #banner-div {
        background-image: url(images/background-1-big.png);
    }
}

Question:

If I now want to swap/replace the image, for example by having an ever changing background image between multiple different images, how would I do that while respecting the correct image for a given resolution?

Let us say I have the following images in the images folder:

I know how to replace the path to the current image in JavaScript, but I did not find a way to replace all @media queries.

Upvotes: 0

Views: 71

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

You could use matchMedia for that. Here's how I would do it: - Each image container has it's responsive variations set as data-attributes so that we can access them in javascript for each breakpoint:

var $elements = $(".element");
var mqls = [ // list of window.matchMedia() queries
    window.matchMedia("(min-width: 860px)"),
    window.matchMedia("(max-width: 600px)"),
    window.matchMedia("(max-width: 500px)")
]
 
for (var i=0; i<mqls.length; i++){ // loop through queries
    mediaqueryresponse(mqls[i]) // call handler function explicitly at run time
    mqls[i].addListener(mediaqueryresponse) // call handler function whenever the media query is triggered
}

function mediaqueryresponse(mql){
    // check which breakpoint we're in and send the parameter "big", "medium" or "small" to the setBakground function
    if (mqls[0].matches){
    	setBackground("big")
    }
    if (mqls[1].matches){
    	setBackground("medium")
    }
    if (mqls[2].matches){
    	setBackground("small")
    }
}

function setBackground (size) {
  // Loop through each element that needs to have the responsive background images and change the background image based on the current breakpoint
  $elements.each(function() {
			$(this).css({
      "background-image": "url("+$(this).attr("data-"+size)+")"
    })
  })
}
.element {
  width: 400px;
  height: 400px;
  background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="element" data-big="//placehold.it/400x400?text=Big1" data-medium="//placehold.it/300x300?text=Medium1" data-small="//placehold.it/200x200?text=Small1"></div>

<div class="element" data-big="//placehold.it/402x402?text=Big2" data-medium="//placehold.it/302x302?text=Medium2" data-small="//placehold.it/202x202?text=Small2"></div>

EDIT: Sorry for the mix between vanilla js and jquery. I copied the first part from a website and then added the last parts with jquery.

EDIT2: Link to JS fiddle to test the responsiveness of it: https://jsfiddle.net/q30u5o7j/

Upvotes: 1

Related Questions