Can you find an image in CSS?

Question

I'm just starting to learn CSS. A way I like to learn is to copy source code from a site I admire, and then sort of "rebuild" it myself to learn how it was done. I am not using that site, or stealing it -- I am just practicing from it. For example, I will take various s from the style sheet and then play with it in my own page to see how it works, etc. Sometimes I have trouble seeing how background graphics are working in the code, so I want to actually get the background image to see, for sure, just what that image was (because it's sort of hard in CSS due to blending of background colors to graphics, etc.).

Anyway, in a "traditional" HTML website you can right-click the image and save it to your computer. Can you do this in CSS? I can get the .css style files (they'll pop up in Notepad, etc.) -- but can I get the graphics?

The ID code usually says something like:

background:url("graphicfilename.jpg") no-repeat left top;

..but that doesn't tell me the directory that file is in. If I am asking a "taboo"-type question, like I am trying to steal, or something, I'm not. I'm just trying to learn.

Can I get graphics in CSS-derived web pages?

thanks,

Phile

Answer 1

..but that doesn't tell me the directory that file is in.

The image is relative to the style sheet.

By the way, you don't put "'s in url(). You can simply write background:url(graphicfilename.jpg) and you should because at least one browser (MSIE5.5 on the Mac) barfs when you add quotes.

Answer 2

There are tools out there that can help you get images from websites. For example with Google Chrome, you can right-click on any element, such as an image, and choose "Inspect Element". That will open the Developer Tools window. From there, click on the tab called "Resources". That will show a complete list of files, including images, that the page is using. Find the image you want, right-click on it and choose Save As...

If you are looking at the CSS, and you see a reference to a background image, the reference is relative to the CSS file. So if the CSS file is located at domain.org/css/myfile.css, and the background image is in code as background: url( "myimage.png" ); then the image is located at domain.org/css/myimage.png.

Answer 3

In css the url for a background image is relative, with respect to the location of the css resource. So if you had this:

background: url('../images/some-image.png')

and the css url was:

/css/my-style.css

then the image would be located at:

/images/some-image.png

Btw: if you are disecting web pages, css etc, then make sure you have the appropriate addins to make this much easier. Use or get Firefox, and install Firebug and the Web Development toolbar. These make inspecting the source html and css an absolute breeze. Firebug will also show you thumbnails of images loaded by css too!

Edit: And don't worry about inspecting or adapting other peoples html or css for your own purposes. It's how we all learnt, how we all gain inspiration for a technical/code solution or simply get ideas for features and functionality on our own sites. It's out there, so use it.