HTML(タグ)の基礎のブログ版です。ホームページを作成するためのタグなどについてのFAQを主に解説しています。徐々に足していきます。
主に頂いたお便りからの回答を元に作成していますが、もしかすると私が誤った回答をしているばあいもありますので、気づかれた方はお知らせいただけますと助かります。
SELECTED ENTRIES
ここから下はこのFAQブログ内ではなく、自サイトのHTMLの基礎のほうへリンクしています。FAQではなく要素などの意味や使い方を調べたい、と言う方は以下からリファレンスの方へ飛ぶ事ができます。
HTMLの基礎:目的別
HTMLの基礎:タグ別
※下記のものは主なタグだけです。他にも掲載しています。
サイト概要
<< メールリンクへ設定したタイトルが文字化けする |main | 更新するたびに画像をランダムに表示 >>

背景画像の繰り返しや位置を指定したい

スタイルシートの指定に関するものなのですが、非常に多い質問です。通常HTMLで背景に画像を表示させるとウィンドウ全体に端から何枚にも敷き詰められて表示されます。が、その表示方法だと、背景画像の絵柄によってはあまり見た目によくない場合があります。そういう時、スタイルシートを使用すれば思い通りに表示させる事が可能です。

ただしスタイルシートといっても、適用方法に様々なものがあり回答は一つだけではありません。ここでは以下のような記述としていますが、これはそのままHTMLの要素内に直接スタイルシートを記述する方法で、余りスマートなやり方とはいえません(ソースのサイズが大きくなる)。ので、スタイルシートでこんなこともできるんだな、という事を理解していただければ良いと言うつもりで記載します。

<body background="画像URL">

通常HTMLで指定する場合にはこのような記述で背景に画像を表示させる事ができました。それをスタイルシートで行うと・・

<body style="background-image:url('画像のURL')">

となります。
(表示の都合上改行されていますが、ソースは途中で改行しないようにして下さい。) ただ、このような指定だと、デフォルトのままの状態となり、HTMLで指定する時と表示形式は変わりません。なので、ここに背景画像をブラウザのウィンドウの左上に一つだけ表示させるように記述してみます。

<body style="background-image:url('画像のURL');background-repeat:no-repeat;background-position:0% 0%">

このスタイルシートを記述する事により、ブラウザウィンドウの左上部分に背景画像を一つだけ表示させる事ができます。

背景画像を表示
background-image:url('画像のURL')

背景画像の繰り返し回数の指定(ここでは繰り返さない)
background-repeat:no-repeat

背景画像位置の指定(ブラウザの左から水平位置0% 垂直位置0%)
background-position:0% 0%

と、このような感じです。他にも表現の指定方法はいろいろあります。詳しく知りたい方はスタイルシートを解説しているサイトをご覧下さい。(私の持っているサイトにもスタイルシートのプロパティを解説したサイトがありますので、宜しければご覧下さい。→「全部丸ごとスタイルシート」)

| 2006.03.28 Tuesday | ykr414 | FAQ【スタイルシート関連】 | - |
url: http://ykr414.ykr.main.jp/trackback/21
-
管理者の承認待ちトラックバックです。
| - | 2011/06/06 4:13 AM |