How can I determine the dimensions of an image as it appears on a website?

I am trying to find the size of the image that was used as a banner on this website: I have tried looking at the source but I have not found information nor a link to the image. I need the exact dimensions of the image. I also would like to know how you found it.


You mean the one at the top that says “deadmau5” in large green letters? It’s this image, which is 960 × 175 pixels, but the actual element that uses the image as its background is only 926 pixels wide, so 34 pixels from right side of the image are cut off.

How did I find it? I used Firebug and just right-clicked the banner and selected Inspect Element from the pop-up menu. That showed me the HTML element (which is just <div class="sectionColor logoBlock">&nbsp;</div>) and the CSS styles that apply to it, which include this:

.logoBlock {
  background-image: url("../../../wp-content/uploads/2011/logos/deadmau5-11.png");
  background-position: left top;
  background-repeat: no-repeat;
  height: 175px;
  margin: 0 0 1px;
  overflow: hidden;
  padding: 0;
  width: 926px;

BTW, nowadays both Firefox and Chrome include this inspection functionality out of the box, as part of their built-in developer tools, so you no longer even need an extension like Firebug to do this.

Source : Link , Question Author : aviau , Answer Author : Ilmari Karonen

Leave a Comment