Start by inspecting the homepage element that should display the image and checking its computed background-image value. If it is none, trace the selector, setting, and CSS cascade. If it contains a URL, open that exact URL, then check the element’s size, overlays, responsive rules, and cache. This sequence separates a missing CSS rule from a bad image path or an image that loads but is hidden or cropped.
1. Find the element and check the applied background rule
A homepage background might belong to the page body, a hero/header container, or a section created in a page builder. Selecting the wrong element can make a valid background look like it has disappeared, so inspect the part of the page where the image is supposed to appear.
- Open the public homepage in Chrome and right-click the area where the image should show. Choose Inspect.
- In the Elements panel, select the body, hero, or section element that should carry the background. Hover over elements in the DOM if you need to identify which box covers that part of the page.
- In the Styles pane, look for a
background-imageorbackgrounddeclaration. Then open the Computed pane and check the final value ofbackground-image. - Follow the source link shown beside the winning declaration to locate the stylesheet or inline style that supplies it.
The Styles pane shows declarations and indicates when another rule overrides them; Computed shows the resolved values Chrome uses. If the computed value is none or no expected rule appears, investigate the selector, theme or builder setting, and cascade before changing the image file. Chrome explains: “The Styles pane crosses out properties that are overridden by other properties according to the Cascading order.” Chrome DevTools: Find invalid, overridden, inactive, and other CSS.
Check the selector and the affected page
Confirm that the selector matches the element on the homepage, not a similarly named element on another template. A rule for .hero, for example, will not affect a section whose class differs. Also check that you are viewing the same homepage, theme, and template that you edited. On a classic WordPress theme, custom background output can depend on theme support, the custom-background body class, and the theme’s wp_head() call. The WordPress developer handbook describes this mechanism and a body.custom-background example: Custom Backgrounds.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
2. Verify the image URL and file
Copy the URL from the active CSS declaration and open it in a new browser tab. It should load the intended image, not an error page or a different file. Check capitalization, spelling, file extension, directory, domain, and whether the address still points to a staging site.
Relative URLs in an external stylesheet are resolved from the stylesheet’s location, not necessarily from the homepage address. For example, if a stylesheet is in /css/, a relative image path can resolve differently from the same path written in a page-level style. The CSS background-image property takes image values such as url(); if the referenced image cannot be used, that layer will not render. See MDN: background-image.
- If the image URL returns an error, correct the path or upload the image to the intended location.
- If it opens but is the wrong image, replace the URL in the winning declaration or the relevant site control.
- If it works on your computer but not for visitors, check that it is hosted at a public address and that the live site is not using an old domain or inaccessible local path.
WordPress theme asset paths
For themes using theme.json, WordPress 6.6 documented paths such as file:./assets/... as relative to the theme root, even when theme.json is in a subdirectory. The same feature note says dot and double-dot directory navigation are not supported in these paths. These details are specific to the documented WordPress 6.6 behavior; check the active version and theme before applying them elsewhere: WordPress 6.6 theme.json relative paths for images.
On WordPress.com, using an image hosted elsewhere does not add it to the site’s Media Library. If that external host removes the file, the background can stop showing. For an asset the site owner wants to control, use an uploaded Media Library image. WordPress.com’s background guidance also describes image sizing and design considerations: WordPress.com Styles.
3. Look for an override, shorthand, or responsive rule
A declaration can be present in a stylesheet yet inactive. In DevTools, a crossed-out declaration is overridden. In the Computed pane, inspect the final value and follow its source to identify which rule wins. Also look for invalid CSS; DevTools can flag invalid declarations and invalid url() statements. Chrome DevTools CSS troubleshooting.
- More specific or later selector: another selector may target the same element and take precedence.
- Inline style: a builder or script may add a style directly to the element.
- Shorthand reset: a later
backgrounddeclaration can resetbackground-imagealong with other background properties. - Media query: a rule may change or remove the image at the viewport width you are testing. Resize the browser and check which declarations become active.
- Invalid syntax: check missing quotes or parentheses, misspelled property names, and malformed URLs.
Fix the declaration or setting that actually wins, rather than adding another competing rule without understanding the cascade. In WordPress 6.6, a specific theme note says Customizer backgrounds take precedence over backgrounds set in theme.json or the Site Editor in the described setup. That is not a universal precedence rule for every WordPress version or theme; confirm your setup and change the control that is winning. WordPress 6.6 theme.json feature note.
4. If the image loads, check whether it is visible
A working URL and a computed image value do not guarantee that the image is visible. The element might have zero or unexpected height, another opaque layer might cover it, or a viewport-specific rule might change the display. Treat these as possibilities to test on the actual page, not as a presumed diagnosis.
- Inspect the element’s box in DevTools and confirm that it has the width and height you expect. A background cannot fill a section that has no visible area.
- Temporarily give the element a contrasting background color. This helps establish whether its box exists and whether another layer covers it.
- Check the computed
background-size,background-position, andbackground-repeatvalues, as well as any overlay or child container with an opaque background. - Repeat the check at the screen width where the image is missing; a mobile or desktop rule may produce a different result.
In WordPress, check the image’s focal point, size, and repeat behavior. WordPress guidance uses controls such as Cover, Contain, and Tile, and notes that not every block exposes the same background settings. If a block has no background control, placing it inside a Group block that supports one may provide the needed setting. See WordPress Styles overview and WordPress.com Styles.
5. Use the right WordPress control for the site
WordPress settings differ by theme type, block, and whether the site is on WordPress.com or self-hosted WordPress. First decide the intended scope: a site-wide background, a homepage template, a hero section, or one block. Then use the control that governs that scope.
| Site setup | Where to check | What to verify |
|---|---|---|
| WordPress block theme | Appearance → Editor → Styles → Background | Whether the site-wide setting contains the intended image; individual blocks may have separate background controls. |
| WordPress.com classic theme with a Customizer background | Appearance → Customize | Whether the active theme provides a background control and whether its selected image and display settings are correct. |
| Classic theme using custom background support | Theme support, body classes, and generated page output | Whether the theme supports custom backgrounds and emits the expected CSS through wp_head(). |
| Page builder or custom CSS | The homepage section settings or the stylesheet containing the winning rule | Whether the edited section and selector match the live homepage and whether another rule overrides them. |
The block-theme path is documented by WordPress.org as Appearance → Editor → Styles → Background: Styles overview. WordPress.com documents the corresponding block-theme and classic-theme paths, but menu locations and feature availability there may not match self-hosted or customized dashboards: WordPress.com Styles. For classic themes, inspect the theme’s custom-background support and page output as described in the WordPress developer handbook.
When both a CMS control and a CSS rule could set the same background, prefer the active system’s supported control if it offers the required scope. Use direct CSS when you have confirmed the target selector and understand which declaration wins. Before switching methods, record the existing value so you can revert if the new setting conflicts with another one.
6. Confirm that the live homepage has the saved change
If the image appears in an editor preview but not on the public homepage, first verify that the change was saved and that you edited the correct theme, template, or file. If you edited a file directly, confirm it was uploaded or overwritten in the expected server location. Then test without stale cached content: reload the page with the browser cache bypassed, and clear relevant server-side or plugin caches if the site uses them.
Recommended Free Tools
WordPress troubleshooting guidance lists browser caching, server-side caching, caching plugins, an incorrect filesystem location, incomplete uploads or overwrites, and URL settings among checks when changes do not appear: WordPress troubleshooting. Change one thing at a time, then reload the public homepage to see whether the served page has updated.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.7. Troubleshoot by symptom
| What you see | Likely area to investigate | Next check |
|---|---|---|
Computed value is none |
Selector, site setting, cascade, or invalid rule | Find the element’s matching rule and inspect the active declaration in Styles and Computed. |
| Computed URL is present, but opening it fails | File path, filename, host, or access | Open the exact URL and correct it or upload the asset to the intended location. |
| URL works, but no image is visible | Element size, crop, overlay, or responsive styling | Inspect the box, background settings, and winning rules at the affected viewport. |
| Only the live site is wrong | Unsaved edits, wrong template or upload location, or cache | Confirm the saved change and deployed file, then check browser, plugin, and server cache. |
| Image appears on one device size but not another | Media query or block/theme responsive behavior | Compare the active declarations and background settings at each viewport width. |
| WordPress editor has no background control | Block or theme does not expose that setting | Check whether the block supports a background or place it inside a Group block that does. |
Or skip the browser setup
If you need a screenshot to verify what the public homepage actually renders, ScreenshotNeo can return an image or PDF from one GET request. Its cleanup options accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
For a basic capture, replace the example URL with your homepage URL and provide your API key. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes full-page capture with lazy images loaded, CSS-selector element capture, viewport and device options, PDF settings, custom CSS and JavaScript, wait conditions, request blocking, custom headers and cookies, caching, signed image links, asynchronous jobs, bulk capture, and a usage API. The same feature set is available on every plan. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month with no card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
FAQ
Can I use an image hosted on another website?
Yes, if the URL is publicly reachable and the host continues to serve the file. For WordPress.com, an externally hosted image does not become a Media Library asset, so an upload is preferable when you want control over it. WordPress.com Styles.
Why does the background look different after changing themes?
The control or CSS that supplies a background depends on the active theme and whether the site uses block-theme styles, a Customizer setting, a page builder, or custom CSS. Identify the active theme and the winning rule before moving the setting.
Should a homepage background use Cover or Contain?
It depends on whether filling the section or showing the complete image matters more. Check the resulting crop and focal point on the actual homepage at the screen sizes that matter; available controls vary by block and theme.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
