title: CSS content:url() not working on anything other than chrome. Change the <img> src using JS?
body: <p>I want to change the logo of my navbar on scroll using css. It already changes color on scroll using the <code>.affix</code> class provided by bootstrap.</p>
  
  <pre><code>&lt;a  href="#"&gt;&lt;img class="limg"  src="images/firstlogo.png" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Only way i found how to do this was:</p>
  
  <pre><code> #custom-nav.affix .limg{
   content: url(../images/secondlogo.png);}
  </code></pre>
  
  <p><strong>which works perfectly on chrome</strong>. However it doesnt work on Firefox / IE / Microsoft Edge.</p>
  
  <p>There seems to be a solution using ::before and ::after prefixes but those didnt work for me.<br>
  It could be caused by the following JS code which implements the affix class on scroll.</p>
  
  <pre><code>$(window).scroll(function() {
  if ($(".navbar").offset().top &gt; 50) {
      $('#custom-nav').addClass('affix');
      $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
      $('#custom-nav').removeClass('affix');
      $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
  });
  </code></pre>
  
  <p>If so, is there anyway i can change that <code>&lt;img src""&gt;</code> using JS when <code>affix</code> activates ?</p>