Load locally stored images through css with inspect element - browser

Question

I'm trying to redesign a small portion of vastly huge site and I was told that I can load custom images to Inspect Element (Chrome) if they are located in the same path as the stylesheet to which the site is remapped. (all done through css via 'content: url('...');') but the webpage is still looking for them in its own resources. So is there a way to use a locally stored image with Inspect Element?

Answer 1

When you're passing images in locally you can use, for example:
file:///C:/Users/[username]/Desktop/picture.png
So if I was to change a background image I would use
background-image:url("file:///C:/Users/Julia/Desktop/background.png");
But note that a lot of sites don't allow you to load local resources, so an error may appear in the inspect console when you try.

Answer 2

Actually, it only works with background instead of background-image (not sure if it works) but background without image seems to work. So put in:
file:///Users/[YourName]/Documents/picture.png
Like this:
background:url("file:///Users/[YourName]/Documents/picture.png")
I just decided to contribute because I just wanted to try it out myself as well and found this as the first answer despite the post being 2-3 yrs old; although for other users it might be helpful.
Also, this was done on Opera, but haven't tried it on other browsers, but it does work for me. Don't include the drive name. But you can simply copy the URL, by dragging the image into the browser (if it loads it) and copy the link. It should work (usually older browsers that don't auto-download the image).