Often in my web work, I need to extract a logo or element from another web site. The old right/control click does not work if the image is set by a more elaborate CSS extension (e.g. the background image for a header).

Today I used a trick I know I have done before, but hey, might was well share the treats. Ready?


Okay, I needed a banner image to use on a Google Form I am prototyping for the Creative Commons Certification project. Sure, they offer a lot of nice images from the settings in the new form editor, but why look like everybody else?

They have recently rolled out a new look for the Creative Commons web site


Nicely done.

What I need is something like the logo and the background in the header, a banner like image. But I don’t want all the menus as it might look like something you can click, when I will be using just an image.

I could download the white logo and make a redo of the background in Photoshop. That gradient pattern is not an image, but some CSS magic.

So I have another idea… I am going to modify the elements in my browser using the web inspector. I use the Chrome Web inspector several times a day. To use it, you have to first got to your settings, technically the extension settings chrome://extensions/ and make sure the box for Developer Mode in the top right is checked:


I go back to the web page, and control-click (Mac, right click on those other platforms) on an area near where I want to look at, and select Inspect from the contextual menu:


It might open as a side by side window thing, I like it better to have the inspector in its own window (I am not quite remembering which icon in the Inspector does it). Take a breath, we are looking at CODE. I open toggles on the left looking for the CSS element (probably a dv) that contains some elements I want to hide. As I click on different elements in the code, my browser shows me on screen the part I am working on:


With some trying, I am pretty sure it is this div named #site-header-menu, and on the right, I can see the CSS applied to it. I can place my cursor within the CSS declaration, press RETURN, and start adding.

display none

Once I start typing disp Chrome will autocomplete to display: I can even press tab and see what options I can use– here is the key, setting display to a value of none, then hitting TAB to put it into play, will hide the element.

BOOM! All the side menus are gone. I go on to find the element that contains the DONATE button, a class called .donate-action


Again adding display:none; to the CSS class that contains that green button, will hide it:

button display none

I of course am not changing anything to the web site, just to the way my browser sees it. If I reload the page, all my changes disappear. But I got what I want- the logo sitting on the orange gradient background, and the tag line in the grey bar:


Now I can do a screenshot and get the clean image I need:


This by the way, is a totally useful way to experiment with CSS, I do it all the time on my web projects to test, which is way easier then editing CSS, saving, uploading, reloading.

Go try it, and let me know how it works. I will email you a Milk Bone.

Top / Featured Image: I went to the licensed for reuse well of Google Images- "little tricks" was not quite doing it, but seeing a few photos of dogs performing (sadly they were portrait landscape, I went back to a search on "dog trick" and hit gold.

This is a still image from Cool Dog Trick Backstall All Fours a Creative Commons licensed YouTube video. Heck you might was well watch!


If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Become a patron at Patreon!
Profile Picture for CogDog The Blog
An early 90s builder of web stuff and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person. And he is 100% into the Fediverse (or tells himself so) Tooting as @cogdog@cosocial.ca


  1. Thanks for the share. Appreciate as well that you pop the hood on the web like this. A similar tool that I like is Firebug https://getfirebug.com/ . Gave away my dog treats to 2 stays tonight. Stripey dog and slobbery dog. Floppy-eared husky dog really one though, so he can have any extras you have.

  2. Hi Alan,
    I do this too.

    I also use this extension in Safari & Chrome:

    Nice because, for example, on a WordPress multi-site where you can’t edit themes you can use it to write a bit of css them copy paste it into the jetpack css editor.

Leave a Reply

Your email address will not be published. Required fields are marked *