# Download a background image

> Save a CSS background image that right-click won’t offer: find its url() in DevTools, get the right size for your screen, or list every background at once.

Canonical page: https://sitepeel.dev/guides/download-background-image-from-website/

To download a background image from a website, right-click the area and choose Inspect, find background-image in the Styles pane, then right-click its url() and open it in a new tab to save it. Or paste the link into a free asset extractor: it lists CSS background images, including ones for other screen sizes.

Published: 2026-11-04

Tool used in this guide: [Image downloader extension](https://sitepeel.dev/image-downloader-chrome-extension/index.md)

Free website tool for this task: [Asset extractor](https://sitepeel.dev/free-tools/asset-extractor/index.md) (https://sitepeel.dev/free-tools/asset-extractor/)

## In short

- Background images are set in CSS, so right-click doesn’t offer Save image
- Their address is in the background-image rule in DevTools
- Sites often load a different file for phones and wide screens
- Gradients and patterns drawn in CSS aren’t files at all

## How to use it

1. **Inspect the area** Right-click the background and choose Inspect. The element, or a parent, holds the image.
2. **Find background-image** In the Styles pane, look for background or background-image with a url().
3. **Open the image** Right-click the address, choose Open in new tab, then save the image.
4. **Or list them all** Paste the link into the free asset extractor and search for CSS background.

## Why right-click doesn’t work

An `<img>` is part of the page, so the browser offers Save image as. A background is styling: CSS paints it behind other content, often under text or a dark overlay, so the menu never sees it.

Good to know: If Inspect shows a `<video>` or `<canvas>`, the background isn’t an image at all.

- [Download a background video instead](https://sitepeel.dev/guides/download-video-from-website/index.md)

## Find the image in DevTools

- Nothing on the element? Select its parent in Elements, or check its `::before` and `::after`.
- Open the Computed tab and search background-image to see the final value.
- In Network, choose Img and reload: the background is one of the requests.
- A `data:image` address is the image itself. Paste it into the address bar to save it.

## Get the right size

- `image-set()` lists the same image at 1x and 2x: pick the 2x file.
- `@media` rules swap the background at other widths. Check them in Styles, or widen the window.
- Image services may add a width like `w=800` to the address. Removing it sometimes loads a larger file.

Tip: The asset extractor reads backgrounds in every media query and hover state, so you get each size at once.

## When there is no image to save

- `linear-gradient` or `radial-gradient`: CSS draws it. Copy the rule instead.
- A `<canvas>` or WebGL scene: code draws it. Take a screenshot.
- A video: save the MP4 instead.
- An SVG pattern: save it as an SVG file.

- [Screenshot tool: capture any page, free](https://sitepeel.dev/free-tools/screenshot/index.md)

## Questions and answers

### How do I download a background image from a website?

Right-click the area and choose Inspect, find background-image in the Styles pane, then open its url() in a new tab and save it. Or paste the link into a free asset extractor, which lists every CSS background.

### Where are background images stored on a website?

In image files on the site’s server or image service, named in its CSS with background-image: url(…). The CSS can be in a stylesheet, a style tag or the element’s style attribute.

### Why can’t I right-click to save a background image?

Browsers only offer Save image as for img elements. A background is painted by CSS and often covered by text or overlays, so you find its address in DevTools instead.

### How do I save a background image without DevTools?

Paste the page’s link into a free asset extractor. It reads the page’s stylesheets and lists every background image, marked CSS background, ready to download.

### Can I use a website’s background image?

It belongs to the site’s owner or photographer. Use it for reference, or get a license; many sites use stock photos you can license yourself.

## Further reading

- [MDN: background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
- [MDN: image-set()](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set)

## Related pages

- [Extract website images](https://sitepeel.dev/guides/extract-images-from-website/index.md): Download a website’s images, SVGs and videos, choose the right size and see why some files won’t download. Online or with Sitepeel for Chrome.
- [Find larger website image sources](https://sitepeel.dev/guides/download-original-website-images/index.md): Get the larger image behind a website thumbnail: open the gallery view, check srcset and currentSrc, and know when the original isn’t public.
- [Save WebP images as JPG or PNG](https://sitepeel.dev/guides/save-webp-as-jpg/index.md): Save a WebP or AVIF image from a website as JPG or PNG: convert it in Paint, Photos or Preview, ask the site for a JPG, or convert a whole folder at once.
- [Download SVGs from a website](https://sitepeel.dev/guides/download-svg-from-website/index.md): Save inline SVGs, sprite icons, SVG files and CSS background SVGs from any website, step by step, with Chrome DevTools or a free online asset extractor.