How to inspect and download banner image from this website?
How to use Google Chrome's Inspect menu, or an alternative procedure, to extract and save the image that appears in this website's banner at the top of a man wearing a hat? Could not locate the image's location in the inspect directory.
https://www.splcenter.org/hatewatch/2018/09/18/ok-sign-white-power-symbol-or-just-right-wing-troll
There is a background-image
property on the parent <header class="group-header">
element. Specifically, the group-header
class:
.group-header {
background-image: url(https://www.example.com/sites/default/files/styles/splc_page_banner/public/milo-handsign.jpg?itok=HYGSWMjR);
}
(I've exemplified the domain name.)
If the image is not directly on the element you are inspecting, then navigate up the DOM... it's likely to be on a parent, grandparent element, etc.
However, navigating the DOM is not necessarily the easiest way to find an image. Go to the "Sources" tab and scroll down the list to get to the images and step through to find the image you want.