Right-click does not offer Save image as on a CSS background, and that is not a bug. There is no image there to save, in the sense the menu means. Here is why, and three ways to get the file anyway.
Why right-click has nothing to offer
A picture can reach a page two ways. It can be written into the HTML as an image element, which is a real object in the page that you can point at. Or it can be named in a stylesheet, as the background of some other element, usually a plain container.
In the second case the thing under your cursor is that container. The browser has painted a picture onto it, but the picture is a style, not an element, so the context menu offers you the options that make sense for a box and not the ones that make sense for a photograph. Hero banners, section headers, decorative panels and most sprite sheets are built this way.
Method one: read it out of the styles
- Right-click the picture and choose Inspect.
- In the Elements panel, look at the highlighted element. You may need to move up a level or two to the container that actually carries the background.
- In the Styles or Computed pane, find
background-image. Its value looks likeurl("https://example.com/hero.jpg"). - Open that address in a new tab, then save it normally.
This is exact and it always works, because you are reading the value the browser itself resolved. It is also four steps per picture.
Method two: catch it in the Network panel
- Press F12 and open Network.
- Set the filter to Img.
- Reload the page, and scroll down it so lazy-loaded sections actually load.
- Find the file in the list, right-click the row, and open it in a new tab.
The advantage over the first method is that you see every image the page fetched without hunting for the element that owns each one. The disadvantage is that you also see every icon, tracking pixel and sprite, and nothing tells you which row is the banner you were looking at.
Method three: an extension that reads computed styles
An extension can walk the page, ask the browser for the computed
background-image of each element, and list what it finds beside the ordinary
images. That turns the four-step manual process into a checkbox.
Worth knowing: a background can be a stack of layers, such as a dark gradient painted over a photograph to make white text readable. Only some of those layers are files. A tool that handles this properly will pull out the file and ignore the gradient.
The one case that has no answer
If the background is not a file at all, there is nothing to download. A pure CSS gradient is drawn by the browser from a formula, and a picture assembled on a canvas exists only in memory. You can screenshot what you see, but that gives you a copy at the size it was displayed rather than the original file, which is usually not what you wanted.
Copyright still applies
A background image is as protected as any other photograph. Being able to reach the file is not permission to reuse it. Check the site's terms and the image's licence.
Where Pixcrate fits
Pixcrate reads computed background images across the page, including pseudo-elements and layered backgrounds, and lists them next to the ordinary images so you can filter and save them together. It also reaches the two other places a manual scan tends to miss: images inside web components, and images the page fetched with its own scripts.
See also: how to download all the images on a page.