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

[tataganet]

Hi everyone,

It’s the first time i’m using Flywheel, and i love it.

However i’m having an issue with background-images (built with Elementor), they don’t show up when i go through live link. When i inspect element with Chrome, it appears that background-img URL is still mywebsite.local/XXXXX instead of http://e6fdaXXX.ngrok.io/XXXXX

It seems like Absolute URLs aren’t replaced in assets such as CSS, but i can’t provide to Elementor a relative URL in that special situation (background image)

Thanks in advance, i hope i’m clear enough

For the record, i’m using

• Wordpress 4.9.8
• OceanWP v1.5.31
• Elementor v2.3.2

Thomas

[tataganet]

If anyone has the same problem, here is the fix that i finally found. Not perfect, but actually does the job :

I wrote some lines in Custom CSS with the “!important” mention, to manually replace URLs

I found background section css with Google Chrome inspector, copied it to Custom CSS section, and replaced begining of the URL with Live Link URL

That gives, for every image, something like that (for example) :
.elementor-6 .elementor-element.elementor-element-b29dbf8 {
background-image: url(http://e6fdaXXX.ngrok.io/wp-content/uploads/2018/11/background.jpg) !important;
}

If you have better solutions don’t hesitate to share it here

Hope it still helps

Good luck to all of you

Thomas

[Pixel]

i’ve the same problem, i think a FIX is due to let external people to view the internal website at full.
I’m using many background images and is terrible to tweak all CSS

[digitalguava]

I’ve had a similar problem when I push a site from Local to Flywheel and the background images were not displaying.

I found Elementor has steps you can take to resolve this including regenerating the CSS so the background image paths are pointing to the right place.

Take a look: https://docs.elementor.com/article/218-i-changed-the-url-of-my-website-and-elementor-does-not-work-anymore

Hope this helps other folks who are running into this problem.

[seanharris]

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.

[dahmenator]

Thanks for the pro tip, seanharris.

I have a question for your method.

If I want to us the Replace URL function in Elementor, how do I go about just changing the URLs from absolute to relative?

For example: I have a background image loading at “http://mysite.local/wp-content/uploads/2020/07/assisted-living.jpg” where “mysite” is actually the name of my site but I’m protecting it here in this forum.

So let’s say I want that image to load at “/wp-content/uploads/2020/07/assisted-living.jpg” instead.

How do I use the Replace URL tool to accomplish this? I don’t want to hose my local site or break the images, so I’d appreciate more info on how you accomplished this.

Many thanks.