リニューアルから数ヶ月経ちますので、TOPの背景画像を変更してみました。
元々、TOPのイメージを大きく変えるには画像の差し替えが一番、しかしその上のメニュー等の色調整は面倒、という事で、今回のデザインでは、上から
メニュー等部品
メインコンテンツ部分
差し替えが利く画像のスタイル
背景（ここがアニメーションしている）
の順で優先度を振って重ねてあります。
さて、背景の画像ですが、基本的にあまりでかい画像は使いたくない、という事で、
横幅1280pixel程度とし、それを背景にあて、
background-size:cover
というプロパティで枠にフィットさせています。
このプロパティにより、要素の枠内に画像の辺がぴったりくっつくように拡大・縮小してくれます。しかも縦横比はそのまま（はみだした部分はオートで切ってくれる）キープしてくれるので、レスポンシブデザインにはぴったりです。
display:table-cellと並んで、激しく使うcss3要素の一つです。
そこから更に、opacityで要素全体の透明度を強制的に下げ、背景の色変化アニメーションをわずかに透かしてみせることで、時間と共に色が微妙に変化するようになっています。
…できたら上記のような方法ではなく、ずばり背景の上に画像要素を乗算したいのですが、今のcssでは正式にそちらの方法に対応していません。
是非、background-blend-mode を正式に実装して頂きたいものです。
