Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am trying to find the size of the image that was used as a banner on this website: http://www.deadmau5.com/. I have tried looking at the souce 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.

share|improve this question
    
YOu don't need firebug or any other software: if you view the source (which all browsers will show you), you can look for the linked CSS files, at the top of the document, then open them manually in a new tab. –  horatio Jan 3 '12 at 15:18
    
@horatio if the css is not clear enough in mentioning the exact size, for example in Bootstrap's responsive image class, you'll need the tools to identify the dimension.. –  noob Nov 6 at 5:48

3 Answers 3

up vote 6 down vote accepted

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;
}
share|improve this answer
    
+1 for Firebug. Very useful. –  Lauren Ipsum Dec 31 '11 at 1:13
1  
You can always view image by right clicking and selecting view background image all the dimension and the name of the image will be displayed in title bar.... –  Jack Dec 31 '11 at 5:30
    
Unless of course there's something (transparent) covering the element that actually contains the image, e.g. a child element, in which case inspecting the element using Firebug or Chrome's dev tools usually works. –  Lèse majesté Dec 31 '11 at 10:10

Another way is to have Developer Tools open on Chrome (or the equivalent on FF/IE) before visiting the page and it will show you the files loaded on the Network tab.

Then just click the banner file and it will show you its properties, including its dimensions.

share|improve this answer

You can use Chrome developer tool to find out current dimension and original dimension of an image. Open the page, hit F12 (Developer tools) and inspect the element using the magnifying glass icon in the top left of the Dev tool view. Once you know which <img> element you need, just scroll to the bottom of the right pane in the tool view. You'll get the pictorial graph of the dimension, it's margins and paddings and borders (In short the DOM model of the element)

Here's the example using my website - Dev Tool preview

Have a look at the Inspect element button and Dimension view in the red circles.

share|improve this answer
    
And yes if you just hover over the image or the <img> tag you'll get the dimension too (which includes the margin and border). –  noob Nov 6 at 5:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.