Grow your CSS skills. Land your dream job.

Have you ever seen this?

Published by Chris Coyier

Read Kevin writes in:

A css file will have something like...

background:url(../images/topheader.htm) top left no-repeat;

...where topheader.htm is just an empty file. In this same directory is a jpg named topheader.jpg. How does this work? Why is it done this way?

Yes, I have seen that before. I have no idea how it works or why it's done. I tried to reproduce this technique in my secret laboratory and was unable to get it to work.

I have seen image paths in HTML files point to PHP files before, such as in the old Random Image technique with code like this:

<img src="/path/to/images/rotate.php" />

But that makes sense to me -- the script will return a file path. This is just a blank HTML file...

Is there some kind of server-side scripting going on here? Has anyone else seen this before? Do you know what it's all about?

Comments

  1. WC
    Permalink to comment#

    Looks like Apache rewrite directives to me. The blank htm file is just a red herring.

  2. There are modules/configurations that will allow a web server to serve another file if it can’t find the one that is requested. From what I’ve seen the serer will serve a file that is closest in filename to the one that is requested.

    Example: browser requests file1.htm, but is not found in that directory. Server finds file file1.jpg and serves that instead. The server tries to minimize 404 errors.

    I personally don’t like this since it reinforces sloppy coding and can cause debugging headaches.

  3. Tom
    Permalink to comment#

    I’d have to agree with WC. With mod_rewrite, ‘/images/topheader.htm’ could literally be writing to any server side script.

  4. yeah WC is right – with a URL to the site thats doing this it would be easier to tell for certain

  5. Paul
    Permalink to comment#

    These are viable ways of making that configuration work, but with these examples, there is no reason for doing this except possibly to avoid having the image hot linked.

    What’s the context?

  6. Permalink to comment#

    I agree with Paul.
    I suppose the htm file is not blank but it might be some server side script. A blank file is what is being returned to the client.

    IMHO it wouldn’t make sense to use the rewrite engine that way. The only thing that makes sense to me is a script that e.g. checks the referrer to avoid hot linking or does some other processing, returning a blank file if some condition is (not) met.

  7. Great answers everyone, thanks!

    I’ll ask Kevin if he has a link to the URL in question. As I said, I know I’ve seen it before but I can’t come up with the link to one off-hand.

    The answer is coming into clearer focus here. So far we have established that the HTML is very likely NOT blank, but contains a script of some kind that just isn’t visible when you link to it to view it in a browser. That script likely returns a file path to the image if certain conditions are met.

    The preventing hot-linking thing doesn’t make sense to me though… Since this is inside a CSS file, how can the referrer be anything other than the same site? Unless the CSS file was stolen and trying to be used on a foreign site, I suppose.

  8. My first instinct is to assume some use of mod_rewrite or a redirect directive, but if that were the case, wouldn’t calling the page directly STILL invoke that directive?

    For example:
    redirect 301 /images/top.html http://images.somedomain.com/top.gif

    If you directed your browser to /images/top.html, it should still fire off to images.somedomain.com/top.gif, right? That’s what HTTP redirect codes are for: telling the browser to go somewhere else.

    That’s just wacky, though… I suppose some rewrite could be done to feed it off to another file, with some data about which page it was called from or something… but that seems rather complicated, and I can’t see any value to doing it.

    So yeah, not sure how or even why.

  9. Dean
    Permalink to comment#

    Scripts such as rotate.php don’t return a file path, they return the actual image data stream that is seen as an image by the browser – serverside, the image may be an actual file or it may be concocted on the fly by the script.

    Some servers are also set up to parse html files as php files (not efficient but doable).

    Saying that, I don’t know the answer to your question!

  10. Permalink to comment#

    I’ve done this kind of thing and it’s easy with server side scripting and either a rewrite module such as mod_rewrite or isapi_rewrite – the other alternative being to map *.* in IIS to asp

    All you have to do in the server side scripting language you are using is look at the http_referer server variable. You can then work out whether to send an image, nothing or even an image that says “you do not have permission to view this file” based on where the user was last.

    I have a script running on my website that references the refering domain against a list of registered domain names to see if anyone is using my software that I don’t know about. This script then decides whether to send back a red image displaying “not registered” or a white image saying “registered”.

  11. Gus
    Permalink to comment#

    is part of a script that rotates images on refresh. The whole thing is available here: http://www.alistapart.com/articles/randomizer/

  12. Permalink to comment#

    The one pointing to a php file is probably a script that either creates an image using php’s gd library. (a coding library used for image manipulation and creation) The php will set the files headers to that of an image file so the html/browser wont even realise what its calling isnt an image.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".