How size of a background image using Chrome Dev Tools?

Hi from blistering hot & sunny York UK :slight_smile:

Ok on this page http://www.visityork.org/travel/feature-east-coast.aspx there is a background page in place via css. I need to know the pixel dimensions of thi imgae but after 20 mins of clicking around with Chromes dev tools I just cants get an answer.

Image below illustrates what I’m trying to do…

Grazie mille,
David

Right-click, ‘Open Image in new tab’, then inspect it. So long as the viewport is larger than the image, you should be able to get the correct pixel dimensions in Dev Tools.

1 Like

I don’t see a background image, and if I visit http://mediafiles2.thedms.co.uk/Publication/YK/cms/img/backgrounds/background-eastcoast.jpg I get a 404!

2 Likes

[off-topic]
Firefox is really good as far as images are concerned. Right-click and image info shows original size, resized screen size and background image details, etc.
[/off-topic]

3 Likes

http://mediafiles2.thedms.co.uk/Publication/YK/cms/img/backgrounds/background-eastcoast.jpg

The image is not found on the server.

Thre’s no image in the background!

Anyways, to see the details of any image or to see all the images used in the webpage follow these simple steps:

  1. Open Inspect Element by right click or by pressing CTRL_SHIFT+I

  2. Go to application

  3. In the left column you will find a folder by name images.

  4. Or simply right click on any image on the web page and click inspect element.

  5. Right click on the link of the image

  6. Choose open link in resource panel

You will be automatically taken to the folder of images. In that folder you will find all the images which are used in the webpage (Just not the ones coming from different servers I guess)

1 Like

That’s what I get!

Thank you sorted!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.