When a background image appears in the WordPress editor but disappears on the public page, check the saved CSS URL, the image response and the container dimensions separately. An image that opens while you are logged in may still be unavailable to visitors. Reuploading it is not always the first useful test.
Check which kind of URL you saved
Gutenberg's background URL control allows a supported block to reference an externally hosted image. That does not import the file into your media library or guarantee that the remote host will keep serving it. Availability of this control depends on the installed editor build.
Use a stable HTTPS image URL you are authorized to publish. Avoid copying a temporary signed download link, an admin preview link or a sharing-page URL that returns HTML. Do not place credentials or private document URLs in a publicly served background style.
Find the request in the visitor's page
Open a logged-out browser window, load the affected page and inspect the exact block. In Computed styles, find background-image. If it is none or points to an older file, inspect the winning CSS rule and saved block/global style before troubleshooting the image server.
If the expected URL is present, locate that request in the Network panel. Reload with the panel open if the request was not captured. Record the final response status, content type, redirect destination and any browser-console refusal. Do not copy authorization headers into a public support ticket.
Saved style: Expected background URL. Response: Image bytes, not a login page. Policy: No matching browser refusal. Layout: Visible height and useful crop. Proposed verification, not a customer test result.
Use the response to choose the next step
| Evidence |
Likely investigation |
| 404 from the image host |
Wrong key, removed asset or case mismatch |
| 403 for visitors |
Access policy, hotlink protection or expired signature |
| 200 with text/html |
A login, sharing or error page instead of image bytes |
| Browser reports a CSP violation |
The page's applicable image-source policy |
| Valid image response but invisible background |
Height, positioning, overlay or CSS override |
A command-line request can help distinguish an image response from a sharing page. Replace the example with a public URL you control:
curl -sS -I --max-time 20 'https://images.example.com/public/header.webp'
Some hosts handle HEAD differently from GET. If the header result is ambiguous, inspect the actual browser GET request. A successful curl response also does not prove the browser permits the request under the page's security policy.
Do not weaken security to make one image appear
The page's Content Security Policy can restrict image sources. MDN documents the img-src directive and its fallback behavior. Use the browser's violation message to identify the applicable policy and blocked host.
Prefer moving an approved asset to your established media host when that solves the operational problem. If a new host is genuinely required, have the policy owner review the narrow source addition. Do not disable CSP or add a broad wildcard just to make a preview look right. Also verify HTTPS: a secure page and an insecure asset create a different class of problem from a missing file.
If the file loads, inspect the box
A background does not create useful content height by itself. Check the block's computed height and whether an empty container collapses. Temporarily remove an overlay in developer tools and compare background-position and background-size. A heavily cropped cover image may be present but show the wrong area.
Use an image with an obvious focal point during diagnosis. Change one property at a time, then restore the intended asset. Never rely on a CSS background to convey essential text or a required instruction without an accessible text equivalent in the page.
Verify a durable repair
Reload the clean public URL in a logged-out session at phone and desktop widths. Confirm the saved URL is stable, the response is an image, the browser console has no matching refusal, and the visible crop preserves the intended subject. Recheck after the next deployment or cache refresh if generated styles are involved.
If the problem occurs while uploading to WordPress rather than displaying an existing URL, use the media-upload HTTP error diagnosis. For a live background failure involving hosting, CSS and the CDN, HandL WP can trace the public request using the page URL and a redacted network observation.
References reviewed October 18, 2026. Diagrams and test fixtures are explanatory, not customer results.