How to extract CSS background images from a webpage

Some of the largest images on a webpage cannot be saved with the usual right-click menu. The hero photograph fills half the screen, yet "Save image as" never appears. A patterned panel is clearly an image, but searching the HTML for <img> finds nothing. In both cases, the file may be loaded through CSS rather than an image element.

CSS background images are common in banners, cards, sliders, decorative textures, product tiles, and responsive hero sections. They are not hidden in any security sense. The browser still needs a URL to request them. They simply live in stylesheets or computed styles, so image-only download methods often miss them.

The URL is still there. You just have to look in the rules the browser applied, then decide whether the result is decoration or a reusable content image.

What counts as a CSS background image

The simplest example is an inline style:

<section style="background-image: url('/images/hero.jpg')">
  <h1>Spring collection</h1>
</section>

More often, the URL is in a stylesheet:

.hero {
  background-image: url("/images/hero.webp");
  background-size: cover;
  background-position: center;
}

The image belongs to the element's presentation, not its document content. That difference matters to browsers, accessibility tools, and extractors.

CSS can also load gradients, several background layers, image sets, masks, and pseudo-element artwork. A page that looks like it uses one background may be combining multiple resources.

Why right-click does not see it

When you right-click an <img>, the browser knows the pointer is over an image element and offers image-specific actions. A CSS background is part of a box's painted style. The box may also contain text, buttons, and other elements, so the context menu treats it like a normal page region.

Taking a screenshot is tempting, but it captures only the displayed crop at your screen's resolution. If background-size: cover trims the top and bottom, those missing areas will not appear in the screenshot. Finding the source URL gives you the actual file the browser received.

Method 1: inspect the element's computed styles

This is the most reliable manual method on a desktop browser.

1. Right-click the visual area and choose Inspect.
2. In the Elements panel, move through nearby containers until the correct region is highlighted.
3. Open the Computed styles panel.
4. Search for background-image.
5. Expand the property to see the rule and stylesheet that supplied it.
6. Open the URL in a new tab, then save the file if you have permission.

The computed value may look like this:

background-image: url("https://cdn.example.com/assets/hero.webp");

If you see none, inspect the parent and child elements. Designers often place a background on a wrapper rather than the visible text container.

The Styles panel can be useful too. It shows the authored CSS and indicates overridden declarations. Computed styles answer what the browser ultimately used after the cascade.

Method 2: look in the Network panel

The Network panel records resources requested by the page, including backgrounds that are hard to locate in the DOM.

1. Open Developer Tools before reloading the page.
2. Select the Network panel.
3. Filter by Img.
4. Reload and interact with the page so responsive or hover backgrounds appear.
5. Sort by dimensions, transferred size, or filename.
6. Preview likely files and inspect their request URLs.

This works well when CSS classes are generated, the page uses a visual builder, or the background changes through JavaScript. It can also reveal a large hero file behind a small on-screen crop.

The limitation is noise. Logos, icons, analytics pixels, avatars, and content images all appear together. Use dimensions and the Initiator column to narrow the list. The guide to filtering tracking pixels and tiny images provides a fuller cleanup process.

Method 3: scan the rendered page

A rendered extractor can inspect computed styles after the page's JavaScript runs. Paste the public URL into the ExtractPics image extractor, let the page load, and review the result for wide images that match the hero or panel.

This approach is faster when a page has many backgrounds or you need a complete inventory. It also helps with lazy-loaded sections that do not exist until you scroll. A static HTML parser may see the CSS file but never connect a generated selector to the final visible element.

No extractor can load a background that the page never requests. If the visual appears only after opening a menu, switching a slide, hovering a card, or reaching a breakpoint, reproduce that state first or inspect the relevant stylesheet manually.

Relative URLs and why copied paths sometimes fail

CSS URLs can be relative to the stylesheet rather than the page. Consider a stylesheet at:

https://example.com/assets/css/site.css

If it contains:

background-image: url("../images/banner.jpg");

The resolved image is under /assets/images/, not relative to the page currently open. Copying the raw ../images/banner.jpg into the address bar can lead to the wrong location.

Computed styles and the Network panel normally show the resolved absolute URL. If you are reading a stylesheet directly, resolve the path against the stylesheet address.

Multiple backgrounds on one element

CSS allows comma-separated layers:

.card {
  background-image:
    linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)),
    url("/photos/cabin.jpg");
}

The first layer is a generated gradient. The second is an image file. A parser that treats the whole declaration as one URL will fail. Inspect each layer separately.

Other elements may use two real files, such as a texture above a photograph. Save only the resource you actually need rather than assuming every layer is a duplicate.

MDN's background-image reference documents layer ordering and supported image values.

image-set can provide responsive background files

CSS backgrounds have their own responsive selection mechanism:

.logo-panel {
  background-image: image-set(
    url("panel.png") 1x,
    url("panel@2x.png") 2x
  );
}

The browser chooses a candidate for the display density. Some implementations also offer different formats with type() hints. As with HTML srcset, the file currently loaded is not automatically the largest candidate in the rule.

Search the authored style declaration when you need the full set. The responsive images guide explains the related HTML selection model.

Backgrounds generated by pseudo-elements

Designers use ::before and ::after for icons, flourishes, badges, and overlay art:

.download-card::before {
  content: "";
  background: url("/icons/download.svg") center / contain no-repeat;
}

The pseudo-element does not appear as a normal child in the HTML. Developer Tools usually lists ::before or ::after beneath the selected element, and its computed styles expose the URL.

If the resource is an SVG sprite or mask rather than a standalone icon, follow the SVG sprites and web icons guide. Saving the entire sprite may be correct for a site backup, while extracting a single symbol requires a different process.

Background images loaded by JavaScript

A script can assign an inline background after an API response or user action:

card.style.backgroundImage = `url(${item.coverUrl})`;

The URL may not exist in the original HTML or stylesheet. Inspect the live DOM, computed style, or Network panel after the content appears.

This is common in carousels and single-page applications. It is also why "View Page Source" can disagree with what you see. Page source shows the server response. Developer Tools shows the current document after scripts have changed it.

Why the downloaded background looks different

background-size: cover scales an image until it fills its box, then crops the overflow. background-position chooses which part remains visible. The source file may therefore include more of the scene than the webpage shows.

With contain, the whole image remains visible, but empty space can appear around it. A repeated texture may be a tiny tile that CSS paints many times. A dark hero may actually be a bright photograph under a semi-transparent gradient.

Save the file and preview it independently before deciding it is wrong. The browser's CSS presentation can change crop, tone, repetition, blending, and apparent sharpness without altering the asset.

A clean extraction checklist

For one background:

• Inspect the visible container and its parents.
• Read the computed background-image value.
• Separate multiple layers.
• Resolve URLs against the stylesheet when necessary.
• Check for image-set, pseudo-elements, and media queries.
• Open the final URL and verify dimensions and format.

For a whole website inventory:

• Render each important template and state.
• Scroll far enough to activate deferred sections.
• Collect network image requests and computed backgrounds.
• Group repeated URLs before downloading.
• Keep source-page and selector information with each asset.
• Review licenses and ownership before reuse.

The website image inventory guide explains how to organize those fields for a redesign or migration.

Permission still applies

A CSS file being public does not make its artwork public domain. Background photographs, illustrations, textures, and brand graphics remain subject to copyright and licensing.

Extract files from websites you own, sites you are authorized to manage, or sources whose terms permit your intended use. For third-party work, check the original source rather than assuming a background is free because it lacks a watermark. Read how to check an image's source and license before republishing it.

Why the hidden image is usually findable

The missing hero image is usually not missing at all. It is attached to a rule instead of an <img> tag. Computed styles give you the quickest answer for one element; the Network panel is easier when a page has layers of generated markup.

The fiddly cases are relative paths, pseudo-elements, image-set() choices, and styles swapped by JavaScript. Work outward from the element the visitor can see. Once you know which rule paints it, the browser request is much easier to trace, and the right-click menu no longer matters.