background image url error when developing in localhost

Tagged: , , ,

Author Posts

budaloco September 22, 2019 at 1:23 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I almost went mad over background images.
I’m developing a new website on a local server: http://127.0.0.1/mw/
When I load a custom background image on a h2 element. It does nothing.

This is the code:

.big_header h2.heading-title span {
background-image: url(“/wp-content/uploads/2019/09/bg_02.jpg”);
}

It took me a while to figure it out, but in order to make it visible in a localhost enviroment I had to get rid of the first “/” (dash). I should point out that the first dash is added by the plugin by default.

.big_header h2.heading-title span {
background-image: url(“wp-content/uploads/2019/09/bg_02.jpg”);
}

Now it works! BUT…only in microthemer. As soon as I go to the front end…I can’t see the background again.

Is it me or is this a bug?

Thanks for taking the time to read this

Sebastian September 23, 2019 at 12:04 pm

Hey,

It’s not really a bug, it’s a quirk of your setup. You are using a sub-folder for WordPress, but the root for relative paths is still set to the root folder, rather than your sub-folder. You can solve this be entering absolute URLs instead e.g.

http://127.0.0.1/mw/wp-content/uploads/2019/09/bg_02.jpg

Or by setting the base URL in the head of WordPress. Then you won’t need to manually edit MT’s URLs.

The reason MT uses root relative URLs by default when you insert an image from your WP media library is that it has various benefits:

  1. If you switch domain (e.g. dev to live) the URLs will still be valid.
  2. If you switch from HTTP to HTTPS the URLs will still be valid

I hope that helps! Please let me know if you’re still stuck.

Cheers,
Sebastian

You must login or register to reply to this topic.