下記サイトのトップ画像はどのような作りになっている

質問

いつもお世話になっております。
以前CSSスプライトについて質問させて頂いたのですが、
下記サイト（http://www.livesense.co.jp/）の、div要素に書かれているid=keyの中身は
CSSスプライトを使って記述しているのでしょうか？

CSSスプライトを使用しているかしていないか疑問に思ったのは、background-positionの位置に記述があったので、もしかしたら使っているのでは？と思いました。

もしCSSスプライトを使用しているのならば、この場合、background-positionの位置はどのように事前に決めているのでしょうか？

ご教授お願いします。

回答No.1

van-lin · ベストアンサー

そうですね。
背景画像の全体や一部をbackgroundの位置でコントロール
しているので、CSSスプライトと言えると思います。

ご紹介いただいたサイトは、#key、#key div、#key h1の3箇所で同じ画像を
使っていて、それぞれ表示させるエリアをbackgroundの位置や
widthを設定することで見せているようです。

>background-positionの位置はどのように事前に決めているのでしょうか？
background-positionは全て左上が起点となっているので、
そこからの距離（px）を事前に測っておいて、設定します。

詳しくは以下のようなサイト等、参考になるのではないかと思います。
http://www.webcreatorbox.com/tech/css-sprite/

お礼

良く分かりました。
どうもありがとうございます。

回答No.3

神崎 渉瑠（@taloo）

横長の画像を、
「divの（左右の）中心と、画像の（左右の）中心を合わせるように、
divの上端と画像の上端を合わせるようにして配置」
です。

background-position: 50% 0;

中心を基準にしていますので、
ウインドウ幅を狭めたり広げたりしても、センタリングされた状態になります。

未指定の場合はbackground-position: 0 0;と同じで、左端、上端をあわせます。
http://www.htmq.com/style/background-position.shtml

これを応用した物がCSSスプライトです。

お礼

分かりやすい説明でした。
どうもありがとうございます。

回答No.2

ORUKA1951

以前質問されたとき( http://okwave.jp/qa/q7185610.html )、詳しい説明の場所を示して回答しました。( http://okwave.jp/qa/q7185610.html#a2 )

まったく同じ回答になりますが
background-attachmentについては、 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#propdef-background-attachment を参照
初期値(nitial)は、scrollなのでと国指定しなくても良い。
background-positionは、 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#propdef-background-position を参照。

　読まれたらお分かりのように、background-positionは背景画像の位置を指定するものですね。CSSスプライトは、あくまでそれを応用した技法であって、background-positionが指定してあるから、CSSスプライトであるわけではありません。background-positionの使用されているCSSの1%にも満たないでしょう。

　前回の質問に対して、この様な掲示板システムですべてを答えるのは無理です。CSSスプライトのようなごく一部の応用方法を説明してしまうと、「background-position=CSSスプライト」という誤解を与えてしまいます。
　誤解を与えないために、それぞれのプロパティの仕様書を示しました。

　background-positionの値に数値を指定した場合。それが何を意味するかを理解してください。

お礼

以前の質問内容からご回答頂きましてありがとうございます。
background-positionから応用された技術がcssスプライトであることが分かりました。
また再度添付の仕様書を確認使用と思います。

画像のパーツをそれぞれbackground-positionで指定して、あたかも一つの画像に見えるようにしているのがcssスプライトということだと思いました。