Title: Picturefill Inline Replace
Last modified: April 27, 2018

---

# Picturefill Inline Replace

 *  Resolved [silverboxdev](https://wordpress.org/support/users/silverboxdev/)
 * (@silverboxdev)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/picturefill-inline-replace/)
 * Hey guys, we’re using the Picturefill options on the Pro plugin, but it is not
   replacing hero images that are done via background-image in some inline CSS. 
   The retina images are there in the system, but it’s not replacing. Help please.

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/)
 * (@tigroumeow)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10230883)
 * Hi,
 * What’s your URL? I would like to see how the HTML looks like.
 *  Thread Starter [silverboxdev](https://wordpress.org/support/users/silverboxdev/)
 * (@silverboxdev)
 * [8 years ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10232419)
 * Hey Jordy – the URL is protected – is there a way I can email it to you? Here
   is the HTML that I’m spitting out…
 * <section class=”hero wp-content hero–image” style=”background-image: url(‘[http://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg&#8217](http://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg&#8217););
   background-position: 50% -0.1px;” data-stellar-background-ratio=”0.9″>
    </section
   >
 * The retina image is there – and I can get it using the wp retina 2x functions.
   But it doesn’t convert over to the 2x in the src code.
 *  Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/)
 * (@tigroumeow)
 * [8 years ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10233968)
 * I can see your image is:
    [http://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg](http://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg)
 * Is your retina images named MAR_About_GivingBack_Banner_Hero_**[1x@2x.jpg](https://wordpress.org/support/topic/picturefill-inline-replace/1x@2x.jpg?output_format=md)**?
 * The @2x needs to be behind it. If you file is named MAR_About_GivingBack_Banner_Hero_**
   2x.jpg** it will not work.
 * Also, if that’s not the problem, can you try to rewrite:
 * `url('http://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.
   jpg');`
 * to
 *     ```
       url("http://myaffordableroof.flywheelsites.com/wp-content/uploads/2018/04/MAR_About_GivingBack_Banner_Hero_1x.jpg");
       ```
   
 * It’s not a big change, but just to make sure…
 *  Thread Starter [silverboxdev](https://wordpress.org/support/users/silverboxdev/)
 * (@silverboxdev)
 * [8 years ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10235850)
 * Hey Jordy…
 * I can confirm – I added the Full Sized image manually in the Retina menu and 
   wr2x_get_retina_from_url($url1x) returns the @2x version of the file and I can
   see it in the system.
 * I also updated the quotes to use ” instead of ‘ in the background-image: url()
   field. That doesn’t load because it’s inline CSS so the ” kill the background-
   image call in the inline CSS.
 * In either case the Retina image is there – but it doesn’t update. There are no
   console errors or anything and oddly enough – the Retina 2x log says that it’s
   replacing them – but they never appear replaced?
 * Thanks for your help. We have the developer license for this an manage tons of
   sites so this is a big thing for us to figure out. Appreciate it!
 *  Plugin Author [Jordy Meow](https://wordpress.org/support/users/tigroumeow/)
 * (@tigroumeow)
 * [8 years ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10257778)
 * Hi,
 * Sorry for the late reply. Actually, I am not sure what’s going on – if the Retina
   logs say that it has been replaced, it means that the HTML was re-written. Now,
   this process could have been hijacked by many another process, such as Yoast 
   SEO and the rewriting titles feature, it does cancel all further modification
   in the HTML (I am not sure it was fixed at Yoast). An idea would be to turn off
   all the plugins to make sure it is not because of one of them.
 * How do the logs look like for this? I would like to make sure it’s the right 
   message 🙂 It should be something starting with “The background src … was rewritten
   to …”.
 * Sorry about my mention about the quotes, it actually didn’t matter.
 *  Thread Starter [silverboxdev](https://wordpress.org/support/users/silverboxdev/)
 * (@silverboxdev)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10375647)
 * Thanks Jordy – Yoast boogered it up – the new version (I installed the Pro) seemed
   to fix it immediately. Appreciate it!
 * AD

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Picturefill Inline Replace’ is closed to new replies.

 * ![](https://ps.w.org/wp-retina-2x/assets/icon-256x256.png?rev=2597316)
 * [Perfect Images: Regenerate Thumbnails, Image Sizes, WebP & AVIF](https://wordpress.org/plugins/wp-retina-2x/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-retina-2x/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-retina-2x/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-retina-2x/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-retina-2x/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-retina-2x/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [silverboxdev](https://wordpress.org/support/users/silverboxdev/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/picturefill-inline-replace/#post-10375647)
 * Status: resolved