Issue with CSS background images absolute path
-
Hi
I’m French but I’ll do my best to be clear…
I and a lot of people are using Local By Flywheel to make or stagging/dev websites on our own computers.
Local By Flywheel has a great tool that allow to build locally a website and give a Live Link URL to our customers, so they can see their future website.
The issue is when we use this Live Link URL to look at the website, all backgound images do not show up, and it’s because ou are using absolute path for your columns/sections background images.
I have found them into /wp-content/uploads/elementor/css
So I tried to change all the path to relative path, and bingo: it works, all the images are showing up!
> Before:
background-image: url(“https://mysite.dev/wp-content/uploads/2017/10/my-image.jpg”)
> After:
background-image:url(“/wp-content/uploads/2017/10/my-image.jpg”);There is somme post about this:
https://generatepress.com/forums/topic/slider-background-image-problems/
https://local.getflywheel.com/community/t/issues-with-absolute-to-relative-urls-for-background-images-now-with-screenshots-to-explain/242Could you consider to use relative path for all you CSS images?
Thanks
-
I just want to let you know that I have the same issue with absolute URLs in CSS generated by Elementor. Let’s say that during development website has local URL “https://mywebsite.local” and when I push it to my hosting it is “https://mywebsite.com” – of course, it causes problems with all of the absolute URLs. Images are missing etc. like in the post above.
I can add that I fixed it temporarily by going to WP Admin Dashboard > Elementor > Tools > Replace URL Tab and changing URL from the development one to the one used on a live site – but this solution is very very far from perfect, because of those reasons:
1. In the future, I will want to pull website from hosting to my computer to make some changes locally – I will need to replace the URLs once again to see the images during development on my computer and then remember to replace them again when I push my changes to the live site.
2. Local by Flywheel gives you option called “Live Link” – basically it uses Ngrok with random URL to let other people see the website while it’s still in development on a local computer. It gives you random URL like “https://079d4394.ngrok.io/”
Elementor is a really great tool but this is important to resolve this issue.
One more thing – In Replace URL Tab under Elementor Settings I tried to replace it from development URL to empty string “”. But it didn’t let me, unfortunately. Maybe this would be the way to fix it – by allowing URL to be replaced either by proper URL like it is now or by an empty string to make URLs relative?
- The topic ‘Issue with CSS background images absolute path’ is closed to new replies.
