Change image using only CSS [closed]

Question

I'm using the twenty fifteen theme.

I have a logo set using the WP Customizer.

I want to have the image change on mobile or tablet view.

The breakpoint is anything smaller than 59.6875em.

I'm using this code:

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png");
        width: 300px;
  }
}

It works in Chrome but not Firefox.

I've tried adding :before and :after and adding an a tag, as suggested on other answers, but none of that works.

Can anyone suggest what's wrong, and how I can get this to work on Firefox?

Here is the html:

<div class="site-branding">
    <a href="https://www.example.com/example/aa00/" class="custom-logo-link" rel="home" itemprop="url"><img src="https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png" class="custom-logo" alt="Seed" itemprop="logo" srcset="https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png 248w, https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x-150x150.png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>

Answer 1

Instead of trying to change the URL of the img tag, use your media query to hide the image and change the :before of your <a>. Like this...

@media screen and (max-width: 59.6875em) {
    .site-branding img {
        display:none;
    }
    .site-branding a::before {
        content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png");
    }
}

Answer 2

This can be done with classes for each screen size and media queries. I saw this answered on this page originally: https://stackoverflow.com/questions/34984737/display-a-different-logo-on-mobile-and-desktop

<style>
/* hide mobile version by default */
.logo .mobile {
display: none;
  }

/* when screen is less than 59.6875em wide
 show mobile version and hide desktop */
@media (max-width: 59.6875em) {
.logo .mobile {
  display: block;
}
.logo .desktop {
  display: none;
}
}
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>