Background image reloads in every page


I’m programming a site and I use css to load an image to the background of the pages displayed.

The body css is as follows

body {
	font-family: Arial !important;
	font-size: 11px !important;
	color: #0e4970;
	margin: 24px auto !important;
	width: 960px;
	background: url(../content/site/body-bg.jpg) no-repeat center top #f3d889;

The problem is as stated in the thread subject. Each time I visit a link the client sends a request to the server to reload the background image.
While the image is a bit big (about 850kb) and every web developer must save as much bandwidth as possible, I would like to ask if there is any way around this.

I have used apache’s mod_expires extension but to no effect.
It’s effect is that every file has it’s expiration date at about the 14th of January but the background jpg file expires today.

If it’s of any help, the contents of the .htaccess files are

<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType text/html "access plus 2 days"
	ExpiresByType image/gif "access plus 60 days"
	ExpiresByType image/jpg "access plus 60 days"
	ExpiresByType image/png "access plus 60 days"
	ExpiresByType application/x-javascript "access plus 60 days"
	ExpiresByType text/css "access plus 60 days"
	ExpiresByType image/x-icon "access plus 360 days"

Any help, much appreciated.

perhaps try this method of using css to preload images.

whether a background style then also uses these cached images, I don’t know. but it’s worth a try unless you’re sure it won’t.

Thank you for the reply Kalon.
In fact it was pretty interesting, while I will definitely create a preloader for my site.

As I have searched further I found out that images weren’t being cached in Firefox only so it had to do something with Firefox options.

Google answered my question (as usual :p).

For the record, there were 2 options in the about:config options that needed changing.
They were

browser.cache.disk.enable     default      boolean      true
browser.cache.memory.enable   default      boolean      true

In my machine they were both set to false.
Setting them to true solved the (not so) problem.

ok, glad it’s sorted out on your Firefox :slight_smile:

but what about other Firefox visitors that haven’t got the same option settings. won’t they have the same issue you had?

Forgot that part, terribly sorry.

In the site you provided, it is stated that for a browser to use a cached image, the image needs to be accessed via an absolute url ( and not a relative one (…/image.jpg) in the css file.

I have just tried using a relative path on a css file and caching worked fine.

I assume it works fine with both types of paths.

are you sure ? :scratch:

From the link I posted earlier

When using this method to preload/cache images, remember to call the preloaded images by using the exact same path used for the original preloaded image. For caching to work, the browser must reference an existing resource via the identical path.

which makes sense.

it doesn’t distinguish between relative or absolute paths.

I misinterpreted that paragraph. :blush:

So the problem was purely with Firefox options.

I can’t see any other reason for the problem to appear.
It will appear only if someone changes the css file at each page - can’t say it happens often :smiley:

In case someone has that problem with the same firefox options, he/she can post here to find out the cause :slight_smile: