Casper theme cover image

Hello,
I want to keep different publication cover image based on the device screen size. In the theme, header-background.js file where I should add the custom sized image url ?

This is the code:

.responsive-header-img {
    background-image: url({{img_url background size='xl'}});
}

@media(max-width: 1000px) {
    .responsive-header-img {
        background-image: url({{img_url background size='l'}});
        background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
            url({{img_url background size='xl'}}) 2x);
        background-image: image-set(url({{img_url background size='l'}}) 1x,
            url({{img_url background size='xl'}}) 2x);
    }
}

@media(max-width: 600px) {
    .responsive-header-img {
        background-image: url({{img_url background size='m'}});
        background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
            url({{img_url background size='l'}}) 2x);
        background-image: image-set(url({{img_url background size='m'}}) 1x,
            url({{img_url background size='l'}}) 2x);
    }
}