Search code examples
cssimagegoogle-chrometestinggoogle-chrome-devtools

Test Local Background Image on Live Site with Chrome Dev Tools?


Is there any way to use Chrome dev tools to test different images? I have created a new background graphic and I would like to test it on a live site that already has a background graphic on the <body> tag. I don't want to change the live site yet, though. Just test it to see what the new image looks like. Is this possible?


Solution

  • You can replace the url of the background image in the Elements panel with the url of the image you wish to try. Check this link to see how that is done.

    This change will show effect immediately in your browser window. As Johan Linder mentioned, you will have to host the image somewhere in case you have the image on your computer.

    nate wilton's answer correctly points out how to do this using a Chrome extension.