title: How to Replace Part of Style Background:url in Blogger Widget
body: <p>Firstly, apologies, I'm a complete novice, I'm sure I'll be using the wrong terminology somewhere.</p>
  
  <p>I am trying to increase the resolution of the images in my Recent Posts widget and Random Posts widget.</p>
  
  <p>I need a piece of code that replaces part of the "background:url" of "a class="mag-thumb", the code needs to replace "/s72-c/" in the url with "/s300/"</p>
  
  <p>e.g.</p>
  
  <p><a href="https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s72-c/s_tronic2_en__download.jpg" rel="nofollow noreferrer">https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s72-c/s_tronic2_en__download.jpg</a></p>
  
  <p>would become</p>
  
  <p><a href="https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s300/s_tronic2_en__download.jpg" rel="nofollow noreferrer">https://4.bp.blogspot.com/-0STAMmB_Qws/W3bMkXzc2aI/AAAAAAAAKec/zxATGYlKdFM61Y343kTGa1C5FNli11Y9ACLcBGAs/s300/s_tronic2_en__download.jpg</a></p>
  
  <p>I am using this theme -> <a href="https://www.themexpose.com/2017/09/seoboost-best-seo-optimized-blogger.html" rel="nofollow noreferrer">https://www.themexpose.com/2017/09/seoboost-best-seo-optimized-blogger.html</a></p>
  
  <p>On a test blog here -> <a href="https://andybuckdetailing.blogspot.com/" rel="nofollow noreferrer">https://andybuckdetailing.blogspot.com/</a></p>
  
  <p>There is already a piece of jQuery code running on the site to do exactly what I want, but only for the Popular Posts widget. However, due to the way the Popular Posts widget is written I can't just copy and modify for the Random and Recent Posts widgets.</p>
  
  <p>Popular Posts has an img src, whereas Recent Posts uses a style background.</p>
  
  <p>Thanks so much in advance for your help!</p>
  
  <pre class="lang-css prettyprint-override"><code>&lt;script type='text/javascript'&gt;
  //&lt;![CDATA[
  $(document).ready(function() {
      var dimension = 150;
      $('#PopularPosts1,#PopularPosts2,#PopularPosts3').find('img').each(function(n, image) {
          var image = $(image);
          image.attr({
              src: image.attr('src').replace(/s72-c/, 's' + dimension)
          })
      })
  });
  
  
  //]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I've tried @Bassam 's solution below, but may have input it into the code incorrectly, I placed it directly below the script above, formatted like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>&lt;script type='text/javascript'&gt;
  //&lt;![CDATA[
  $(document).ready(function() {
      $('.mag-thumb').each(function () {
          var img = this.style.background;
          this.style.background = img.replace('/s72-c/', '/s300/');
  });
  
  //]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Second try at @Bassam 's solution.</p>
  
  <pre class="lang-css prettyprint-override"><code>    &lt;/div&gt;
  
  &lt;script type='text/javascript'&gt;
  //&lt;![CDATA[
  $(document).ready(function() {
      $('.mag-thumb').each(function () {
          var img = this.style.background;
          this.style.background = img.replace('/s72-c/', '/s300/');
  });
  
  //]]&gt;
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Third try at @Bassam's solution, this one's live on the test blog linked above if that helps anyone determine why it's not working.</p>
  
  <pre><code>    &lt;/div&gt;
  
  &lt;script&gt;
  //&lt;![CDATA[
      $('.mag-thumb').each(function () {
          var img = this.style.background;
          this.style.background = img.replace('/s72-c/', '/s300/');
      });
  //]]&gt;
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>