CSS background image shows in Firefox but doesn't show in other browsers

admin2025-05-31  4

Closed. This question is off-topic. It is not currently accepting answers.

This question does not appear to be about WordPress within the scope defined in the help center.

Closed last month.

Improve this question

Site was built using Underscores and Laragon as local. I moved it to Bluehost using WPVivid plugin. 2 background images show in Firefox but not showing in other browsers after migration. Chrome Dev tools show that WP still uses localhost URLs for those 2 images for some reason. In style.css image URLs are pointing correctly to folders on Bluehost which contain those images.

I tried clearing cache in WP Admin and browsers, removed SASS folder from Bluehost, deleted style.css.map but still localhost URLs persist.

Any advice on how to have those 2 background images show in other browsers?

Closed. This question is off-topic. It is not currently accepting answers.

This question does not appear to be about WordPress within the scope defined in the help center.

Closed last month.

Improve this question

Site was built using Underscores and Laragon as local. I moved it to Bluehost using WPVivid plugin. 2 background images show in Firefox but not showing in other browsers after migration. Chrome Dev tools show that WP still uses localhost URLs for those 2 images for some reason. In style.css image URLs are pointing correctly to folders on Bluehost which contain those images.

I tried clearing cache in WP Admin and browsers, removed SASS folder from Bluehost, deleted style.css.map but still localhost URLs persist.

Any advice on how to have those 2 background images show in other browsers?

Share Improve this question asked Apr 11 at 22:57 810311810311 517 bronze badges 1
  • have you tried with the last versions of the browsers ? you may have a virus that corrupt the result of the display, have you tried on another computer ? – mmm Commented Apr 12 at 11:13
Add a comment  | 

2 Answers 2

Reset to default 1

The issue was resolved by hosting company after they cleared server cache and renamed htaccess file. Hosting said they used 'Better Search Replace' plugin to replace image URL but I doubt if this plugin is able to identify background image served via CSS as it searches only database. Anyway nextday after I contacted webhost, the issue disappeared. All image URLs were initially correct meaning I provided correct URLs.

This issue is most likely due to hardcoded URLs pointing to localhost that are still present in the compiled CSS or inside the database, despite your style.css looking correct.

Here’s a breakdown of what could be happening and how to fix it:


1. Use a Serialized Search and Replace Tool

Tools like Better Search Replace or WP-CLI's search-replace are built specifically for WordPress, where data is often stored in serialized arrays.

Run a search and replace across the database:

Example using WP-CLI:

wp search-replace 'http://localhost' 'https://your-live-site' --all-tables

Or install Better Search Replace plugin and search for:

  • http://localhost
  • http://localhost/my-site
    And replace with your live URL.

Make sure to back up your database before doing this.


2. Inspect Compiled CSS

Even if your style.css has correct url(...) paths, check if WordPress is still loading an old compiled version or an enqueued minified file from the local environment.

  • Use DevTools > Sources (in Chrome) and open the actual CSS file that’s being loaded.
  • Search for localhost in that CSS file.

If you see it there, your theme may be enqueueing a cached or older CSS file.


3. Regenerate CSS or Clear Server-Side Caches

Try the following:

  • Delete and recompile any .css or .min.css files if your theme uses a build system (e.g., SCSS or Gulp).
  • Clear any object cache, page cache, or CDN (e.g., Cloudflare) that might be serving stale assets.
  • If your theme uses versioning like style.css?ver=1.0.0, try bumping the version number to force a new request.

4. Check Theme and Customizer Settings

If the background image is being set via:

  • add_theme_support( 'custom-background' )
  • Or set via the Customizer > Background Image

Then WordPress stores the image URL in the database under wp_options or theme mods. That value might still reference localhost.

Go to Customizer > Background Image and reselect the correct file from your media library.


5. Look for Inline Styles or Hardcoded PHP

Some themes (especially Underscores-based ones) may inject background images via inline <style> tags in the <head>, based on PHP like:

echo "background-image: url('http://localhost/path/to/image.jpg');"

Search your theme files (header.php, functions.php, customizer.php) for any hardcoded background-image or style output that might have been missed during migration.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1748641345a313718.html

最新回复(0)