Rectangle 27 16

I think you need to determine first if the issue actually is a caching issue or if it's caused by the size of your image. You could use a program like Wireshark or Fiddler to do this, but to be honest it's overkill for your need and you probably already have a browser with developer tools.

Here's how you determine where an image is coming from in Chrome (the other browsers are similar).

  • Open your developer tools and go to the "Network" tab.
  • Find "bg.png" in the list of network requests and click on it's name. Below is an example of having selected a stack overflow image from this page.

Notice that it says status 200 (from cache). The browser didn't need to go out to the server and rerequire that resource. It used the cache. If that "from cache" text wasn't there it wasn't reusing cached resources.

There is also the potential that you'll get a status code of 304. That means that the server said the image wasn't modified since the last request that you made. You do make the server trip in that case.

There are a few reasons that this could occur.

  • You're request headers aren't set to tell the browser to cache the image (also found in that same "Headers" tab that you would have seen that Status Code if the browser actually went to the server for the image). You'll want to set cache-control and expires to something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document.
  • Is it SSL? If so not all browsers cache this but most modern browsers do. Set cache-control: public on these images (and also expires).

The real question here is how do you fix this? Unfortunately, that's entirely dependent on the server and/or the framework that you are using. As the OP is using Apache, they can find great documentation on the Apache module mod_expires to figure out how to tweak caching for their site.

So how do you enforce caching / specify HTTP headers through a css background property?

@DrazenBjelovuk I added some information on how to do this in Apache. It really is dependent on what framework and server you are using. The OP was using Apache and PHP. Since it was a static image, Apache would be the best place to reconfigure that caching.

Then I take it there's no way without control of the server?

css - cache background image - Stack Overflow

css image background cross-browser