cache background image

Question

Is there a way to "cache" background image.

For example.. Background image is 3x3px and it's set like this:

body {
    background: #000 url(bg.png);
}

When refresh happens, background image "flickers" for second.

Is there a cross-browser solution? (for Apache/PHP server if that is relevant)

---

If you go to seo.hr and browse navigation,... you can see what I'm trying to do.

http://www.seo.hr/

http://www.seo.hr/usluge/izrada-stranica

http://www.seo.hr/usluge/optimizacija-za-trazilice

Solution 1

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).

1. Open your developer tools and go to the "Network" tab.
2. 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.

Ok, so my image wasn't in cache... now what?

There are a few reasons that this could occur.

1. 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.
2. 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.

Solution 2

Yes!

You should decide whats more suitable for you, but at this time we have some methods, like:

• Pure HTML/CSS
• Javascript Only
• Mixed HTML/CSS/Javascript
• Using base64 to encode the image somewhere on the source code

At this point I recommend a mixed solution, using javascript. This will make it work on many browsers as possible.

There is a good tutorial at: http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

Having several images in one can take you a step beyond that, so check this sprites article: http://www.alistapart.com/articles/sprites/

Solution 3

You can try to encode your image in base64 and put it directly into CSS source code. I found a question about pros and cons over here.

Comments

[Drazen Bjelovuk]

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

[scottheckel]

@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.

[Drazen Bjelovuk]

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