CSS background image downloader
Paste a webpage link. We render the page, read the background-image value the browser applied to each element, and list the files so you can save the banner or texture you could not right-click.
- check_circle100% free
- check_circleComputed CSS
- check_circleLayered backgrounds
- check_circleNo DevTools
181,848 image extractions and counting
What the CSS background image downloader looks for
A CSS background image downloader finds the pictures a page sets with background-image instead of an img tag: hero banners, section backdrops, card covers and repeating textures. Browsers leave "Save image as" out of the right-click menu for these, because to the browser they are styling, not content.
After the page renders, we read the computed background-image of every element, including elements inside shadow DOM and same-origin iframes. Computed means the value the browser actually applied after every stylesheet, inline style and script ran, so it does not matter which file declared the background or whether JavaScript added it later.
A few backgrounds do not come through. Backgrounds set on ::before and ::after pseudo-elements are not read. Gradients have no file, and inline data: images are skipped. A background that applies only at another screen width, or only on hover, is not the one in effect when we read the page.
How the CSS background image downloader reads a page
Computed style, not source files
We ask the browser what each element ended up with, so backgrounds from external stylesheets, inline style attributes, CSS-in-JS and scripts all count the same.
Layered backgrounds
One element can stack several backgrounds, such as a texture over a photo. Every url() in the value is collected as its own file.
Sprite sheets come whole
Some sites pack many icons into one image and show a slice with background-position. The file is the whole sheet, so crop the piece you need afterwards.
Image files only
A background URL is kept when it points at an image file such as JPG, PNG, WebP, GIF, AVIF or SVG, or at an image CDN like Cloudinary or ImageKit. Fonts and other assets stay out of the grid.
When a CSS background image downloader helps
For designers and developers who want a page's backdrop images without opening developer tools and reading stylesheets.
Perfect for
- checkSaving a hero banner that will not right-click
- checkPulling tileable textures and patterns for a mockup
- checkChecking how large a site's background photos are
- checkFinding which file a section uses before you replace it on your own site
- checkGetting background images on a phone, where there are no developer tools
What you get
- checkEvery url() in each element's computed background-image
- checkShadow DOM and same-origin iframes included
- checkJPG, PNG, WebP, GIF, AVIF and SVG background files
- checkShown next to the page's normal img images, with format and size filters
- checkSingle files or one ZIP
How to use the CSS background image downloader
- 01
Copy the page address
Open the page with the background you want and copy its URL.
- 02
Paste and scan
Paste it into the box at the top of this page and run Quick Extract.
- 03
Find the background
Backgrounds sit in the same grid as the page's other images. Banners are usually the largest files, so sort or filter by size to find them fast.
Why a CSS background image downloader needs a real browser
A script that reads the HTML only sees img tags. Background images live in CSS files, style blocks and style attributes, and many are added by JavaScript after the page loads. Working out which one applies to an element means running the CSS cascade, which is what a browser does.
If a background turns out to be a sprite sheet, cut out the part you need with the crop image tool. For the icons and logos a site uses, the logo downloader and SVG downloader are more direct.
CSS background image downloader questions
If your question is not covered here, send us a message and include the page, file, or result type you are working with.