image not loading every time

[smallcompany]

I have a website made in Bootstrap 3. I noticed that the image I use in site's header does not load every time I switch between the pages. The header image comes from a single template that applies to all pages across the site. Here is the HTML code:

<div class="container-fluid">
<img class="image-center img-responsive header" src="../images/image.png" alt="Example"/>
</div>

Custom CSS:

.container-fluid{padding-right:5%;padding-left:5%}
.header{margin:0 0 10px 0;}
.image-center{display:block;margin-left:auto;margin-right:auto;}

Caching is set in .htaccess:

expiresActive On
# Cache files for 7 days -- forced revalidation
<FilesMatch "\.(gif|jpe?g|png|bmp|js|css)$">
expiresDefault A604800
Header set Cache-Control: "no-cache, must-revalidate"
</FilesMatch>

Can any of the above cause an image not to load?

Thanks

[brandozz]

The first thing that I notice is that you are overriding the margins on the image with the header class. I'm not sure about the .htaccess.

[not2easy]

Yes, the caching is disabled. Although you are setting a one week cache, you are negating or unsetting the caching with:

Header set Cache-Control: "no-cache, must-revalidate"

That isn't the only reason it can fail to load, but the most likely from what you've posted.
This line:

expiresDefault A604800

says "cache for one week". To set a further expiration - like a year - you could use

ExpiresDefault A29030400

and try replacing

Header set Cache-Control: "no-cache, must-revalidate"

with

Header append Cache-Control "public"

[lucy24]

The first thing that I notice is

The first thing I notice is that the CSS uses a relative link. Are all pages in the same directory? (URL, not physical location.)

[Fotiman]

Ditto to what lucy24 said. That was the first thing I noticed as well, and where I'd start looking. I generally avoid using path-relative links in favor of root-relative links, like:
src="/images/image.png"

[smallcompany]

Thank you.

Image link is in HTML code, not CSS. I've never had trouble with relative links in HTML. In this case, other images are linked in the same way, and they always show up - always.

I thought into Apache caching, same would apply here I think: If there's a problem with it, other images would behave the same as well.
I looked around WebmasterWorld, this code should be ok.
[webmasterworld.com...]

What about that Bootstrap CSS that uses before and after on .container-fluid class?
Could any of these CSS settings for ::before and ::after affect it in the way so it does not show up:

display: table;
content: " ";
box-sizing: border-box;

Thanks

[lucy24]

Edit: Post written before the one immediately above mine, darn it.

I should add that I read the first post too fast, and now realize that the relative link is not in the CSS but in the HTML. Relative links in HTML can be appropriate if you have material that will always move as a package, so the relative link remains valid even if all URLs have changed. Relative links in CSS give me the fantods, primarily because I can never remember whether it's supposed to be relative to the CSS, or relative to the page using the CSS. (If you have to look something up every single time you do it, you should probably not be doing it ;) )

But as long as we're here... If the image is used consistently in all pages in an element of such-and-such class, wouldn't it be more efficient to define it as a background-image in the CSS instead of saying the same thing in every page's HTML?

Further edit: A "content" declaration in CSS won't override the explicit content given in the HTML. The terms ":before" and ":after" are a little misleading; they really mean "at the beginning of (but inside) the element" and "at the end" etcetera.

[edited by: lucy24 at 4:53 pm (utc) on May 15, 2015]

[Fotiman]

I'd probably start by using your browser developer tools. Personally, I prefer Chrome (though IE's are similar). Press F12 to open the tools. Navigate to your page. Look at the network tab to see what HTTP headers were returned and whether or not the image was returned. If it looks fine in the network tab, then use the tools to inspect where you think the image should be. From there, you can inspect various elements in the DOM and see what styles are being applied. That might provide some insights into what's going on.

[smallcompany]

If the image is used consistently in all pages in an element of such-and-such class, wouldn't it be more efficient to define it as a background-image in the CSS instead of saying the same thing in every page's HTML?

It's one spot in a template vs. one place in a single CSS file. I don't argue at all, but what's the difference?

Personally, I prefer Chrome (though IE's are similar).

...and this helped me figure that the problem happens in Firefox only (I use it the most). Using Firefox in a safe mode could not reproduce the problem.

Still, I wonder why the header image only. I'm yet to figure which add-on is causing the problem.

Thanks a lot to all of you.

[lucy24]

what's the difference

The difference applies to the human user, not to you, the site designer. A person who reads more than one page will only download an external stylesheet once, assuming normal caching. The HTML is loaded with every page, including the parts that are identical to other pages' HTML. (The image itself will normally be loaded just once either way, again assuming normal caching.)

So it's exactly the same principle as putting anything in an external stylesheet instead of saying it over again on every page. When using a CMS there's also a saved nanosecond or two because the <img> lines in the HTML don't have to be built over again on each request. Admittedly that part is trivial unless you're nibbling at the very limits of your host's RAM quotas.

[smallcompany]

The difference

I agree, no matter if it's only about nano-, milli- or whatever. Simplifying is good if it does not affect anything negatively.

Thanks for all of the input in this thread.

Cheers!