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

Question

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

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

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

ご教授お願いします。

van-lin · Accepted Answer

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

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

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

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

taloo · Answer

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

background-position: 50% 0;

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

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

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

ORUKA1951 · Answer

以前質問されたとき( http://oshiete.goo.ne.jp/qa/7185610.html )、詳しい説明の場所を示して回答しました。( http://oshiete.goo.ne.jp/qa/7185610.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の値に数値を指定した場合。それが何を意味するかを理解してください。

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

そうですね。

横長の画像を、

以前質問されたとき(

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング