Background-images from Elementor URL isn't updated through live link

Support
5

I had similar challenges getting Elementor background images to load on devices in local environments using Local WP with live link.

Here’s how I solved for it. The Elementor Migration Guide was super helpful.

From the elementor migration guide:

Background images are saved in a CSS file which has an absolute URL. To avoid migrating issues with the background images without having to write a script, you can define the CSS Print Method to be inline instead of using external files, if you want. This can be done by going to Elementor > Settings > Advanced > CSS Print Method > Internal Embedding> CSS print method: inline, on your WP dashboard.

Here’s what got elementor background images working on local devices for me. I’m using Local WP with live links for device testing:

  1. In your local environment set the local Elementor css print method to “internal embedding” (Elementor > Settings > Advance)
  2. Conduct a url rewrite (old environment URL to new environment URL)
  3. Regenerate Elementor files (Elementor > Tools > General)

After I did this, in my local environment, my background images showed up in local devices. I then did a push to staging and prod (database included) to see if the background images were still visible and they were. Everything worked.

For production - Elementor cites performance enhancements when having Elementor’s css print method set to “external”.

If you want to do this on prod, after you’re done with your device testing, follow these steps:

  1. In your prod environment set the local Elementor css print method to “external file” (Elementor > Settings > Advance)
  2. Conduct a url rewrite (old environment URL to new environment URL)
  3. Regenerate Elementor files (Elementor > Tools > General)

I think this should solve the Elementor background image conundrum when developing sites locally and on devices. Please let me know if I’m wrong here.

1 Like