cssでアニメーションgifを作動させる方法

初心者の者です。お世話になります。
いつもの様に困っております。ぜひ、お知恵をお貸しください。

h1の文字背面にアニメーションgif(1回表示)を表示させたいのですが、
現在は、h1にbackground: url(images/baranimation.gif) no-repeat;を入れております。
しかしIEでは、更新ごとにスタートしてくれるのですがFireFoxとgoogle chromeでは、更新やサイト内の他のページから戻っても再スタートしてくれません。
これを解決する方法がございましたらお願い申し上げます。
出来れば、h1　の背面に表示してくれる方法が知りたくお願い申し上げます。(CSSが機能しない携帯等でアニメーションは表示したくないのです。)

http://coliss.com/articles/build-websites/operat …
や
http://www.studiomame.com/mameblog/home/blog/010 …
の方法を少し試してみましたが、設定が悪いのかも知れませんが満足のいく結果が出来ませんでした。

文面もお粗末ですが、どうぞ、宜しくお願いいたします。

No.3 回答者： ORUKA1951 回答日時： 2010/01/30 22:03

<Files ~ "\.gif$">

Header add Pragma no-cache
Header set Cache-Control no-cache
</Files>
に変更。

Perlを使う方法。.htaccessを変更しないですむ方法。
　　　(変更すれば拡張子がgifでもCGIとして動かせる。)
画像の変わりに、text.cgiへのpathを書く
たとえば、./cgi-bin/test.gifなら、<img src="./cgi-bin/test.gif" />

#!/usr/local/bin/Perl
# このPathは指定されたものに変更する。
print qq^Pragma: no-cache
Cache-Control: no-cache
Expires: -1
Content-type: image/gif

^;
open IN ,"<./icon/a.gif";#CGIから画像へのパス
foreach(<IN>){
print;
}
close IN;

.htaccessで
AddType application/x-httpd-cgi *.gif;
が利けば、
/nocacheImage にアニメーションGIFを移動して
そこに、この.htaccessをおき、このCGIをtest.gifとしておいても良い。
　よくやる手ですが、ちょっと手を加えれば、PATH_INFOで任意の画像を表示させることも可能です。
たとえば、src="../nocdata/images/ani.gif"
と呼ぶと、サーバー内の/images/ani.gifをno-cacheで出力させたり、
href="../nocdata/tes.html"
とリンクすると、/tes.htmlを表示させたり
　何でもできるのですがね。・・・将来の勉強の目標にどうぞ・・・

この回答への補足

ORUKA1951様
この度は、お世話になります。
たびたびのご回答に感謝申し上げます。
さて、.htaccessですが　保存したときの文字コードにミスがあった事がわかりました。winのメモ帳で保存しておりましたが、その際文字コードを「UTF-8」で行っておりました。そうすると画像(拡張子に関係なく)全てが表示しなくなります。この文字コードを「ANSI」にしたところ画像が表示できました。しかし、ご質問している現象は変わりませんでした。
どちらの文字コードが利いているのか不明ですが、いずれにしても、私の設定もおかしいのだと思います。

CGIですが、だんだん(かなりスローですが)ファイルの置き方くら判ってきた様な感じですが、私の間違った記述でサーバーに負担を掛けると大変なので、もう少し、じっくりと試してみたいと思ってます。

ORUKA1951様のようにスラスラと出来ると楽しくなりそうですね。
今は、睡眠を削ってでも手探り状態で、自分でもガッカリします。

取り急ぎ、進捗でした、

ありがとうございます。

補足日時：2010/01/31 11:50

No.2 回答者： ORUKA1951 回答日時： 2010/01/30 10:22

GIFのキャッシュをコントロールしなければならないのでHTMLではなく、GIFです。

様々な方法がありますが

gifを置いているディレクトリに
<Files ~ "\.gif$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
Header set Cache-Control no-store
Header set Cache-Control must-revalidate
</Files>
と書いた、.htaccessファイルを置いておく。(サーバーで.htaccessが可能であること)

あるいは、GIF画像をCGI動作可能なディレクトリに置いて、CGI(シェルスクリプトで十分)にて、シェルスクリプトが使えなければPerlで・・
./cgi-bin/ani.gif___________の中身
#!/bin/sh

echo 'Content-type: image/gif'
echo 'Pragma: no-cache'
echo 'Cache-Control: no-cache'
echo 'Cache-Control no-store'
echo 'Cache-Control must-revalidate'
echo
cat ../images/anigi/abc.gif

とか、

この回答への補足

ORUKA1951様

ご回答ありがとうございます。
.htaccessの方法を試してみましたが、画像が全て表示しない状態になりました。パーミッションも少し変えてみましたが結果変わらずでした。
私の設置方法に問題があるのかもしれませんが....もう少し、作業してみます。
.htaccessはパスワード等の設定で使った事がある程度です。

cgiは加工した事がなく、まだ作業はしておりません。
少し、勉強して試してみたいと思います。

補足日時：2010/01/30 12:01

この回答へのお礼

ORUKA1951様
.htaccessですが、やはり画像が全て表示されなくなります。
.htaccessへのファイルの書き出し等も問題ないとは思うのですが、アップロードやパーミッションもサーバーの指定で行っては見ましたが...ダメでした。なぜなのか、現状私のレベルでは理解不能状態です??

CGIですが、こちらも、いまいち理解できず、
サーバーはPerlとRubyが使用でき、好きなディレクトリに設置も出来るようです。

この場合、↓のcgiファイルとbaranimation.gifを同じディレクトリに置いて
------***.cgi ファイル---------
#!/bin/Perl/sh

echo 'Content-type: image/gif'
echo 'Pragma: no-cache'
echo 'Cache-Control: no-cache'
echo 'Cache-Control no-store'
echo 'Cache-Control must-revalidate'
echo
cat ../baranimation.gif
--------------------------------
その後、パーミッションを設定し、
後は、どうしたらよいのでしょうか??

ご回答の通りに、作業出来ずにまったくお恥ずかしいのですが、もし、ご指導頂けるのであれば助かります。
申し訳ございません。

お礼日時：2010/01/30 16:57

No.1 回答者： naokita 回答日時： 2010/01/29 22:39

それが正規仕様ですね。

----------------------
検証はしていませんが、
キャッシュされなければ可能かと。
動作はUA次第かな？　お試後に結果をご報告下さい。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

この回答への補足

naokita様

ご回答ありがとうございます。
テストしてみましたが、状態の改善は見られませんでした。
しかしながら、色々と試す事が出来ます。
ありがとうございます。

補足日時：2010/01/30 11:27