背景 ２

今回は背景画像の位置設定について

説明したいと思います。

前回で説明させたいただきましたように

背景には画像も使用することができます。

その画像の大きさによっては、

指定した範囲よりも小さくなることもあると思います。

その時に使うのが

background-repeat:★;

※★にはrepeat-x(縦方向の繰り返し)またはrepeat-y(横方向の繰り返し)

またはno-repeaat(繰り返しなし)、またはrepeat(縦横の繰り返し)のいずれか。



では実際に表示してみましょう

repeat-x	repeat-y	no-repeat	repeat
q

となります。



背景画像を配置する位置も上記①～⑨の場所に設定できます。

①	②	③
④	⑤	⑥
⑦	⑧	⑨

①style="background-potision:top left;

②style="background-potision:top center;※center省略可

③style="background-potision;top right;

④style="background-potision:center left;※center省略可

⑤style="background-potision:center center;※centerは1つで可

⑥style="background-potision:center right;※center省略可

⑦style="background-potision:bottom left;

⑧style="background-potision:bottom center;※center省略可

⑨style="background-potision:bottom right;

要素が2つはいる場合は半角スぺ―スが必要です。

タグ：CSS so-net ブログ カスタマイズ 背景

背景 １

今回は背景について説明したいと思います。

背景の設定は2種類あります。
1つは色、もう１つは画像の設置です。
設定は下記のようになります。

＜色の設定の場合＞
＜span style="background-color:色の名前"＞時よ止まれ＜/span＞
例　時よ止まれ
＜span style="background-color:orange"＞時よ止まれ＜/span＞

<画像の設定の場合＞
＜span style="background-image:url(ファイルの名前);"＞時よ止まれ＜/span＞
例　時よ止まれ
＜span style="background-image:url(/_images/blog/_c4a/dio-the-world/stripe2.jpg)"＞

※ファイルの名前には、url(の次に記事作成の下のファイル一覧から背景にしたい画像を選択する。
＜a href="/_images/blog/_c4a/dio-the-world/stripe2.jpg" target="_blank"＞
＜img src="/_images/blog/_c4a/dio-the-world/m_stripe2.jpg" width="350" height="87"
 border="0" align="" alt="stripe.jpg" /＞＜/a＞と出るので
赤字の部分だけを残し、後は消去する。

※画像は必ず全て表示されるわけではありません。
背景画像の詳細設定は次回に説明します。

これは、この時よ止まれという部分に


上の画像を背景に用いました。

いままで区間にCSSを適用する際には
＜span＞~＜/span＞を使用してきましたが
次に＜div＞~＜div＞を紹介したいと思います。

＜span＞も＜div＞も区間を表すタグですが
＜DIV＞ と ＜SPAN＞ の違いは，
前後に改行を伴うか，伴わないかです。

この記事を見ていただければお分かりになると思いますが
前半部分はlightgreenにて
後半部分は/_images/blog/_c4a/dio-the-world/stripe2.jpgというファイルにて
背景を埋めております。

＜span＞タグが一部分なのに対し＜div＞タグは
枠全体に影響します。　
両方を組み合わせることによって、オリジナルの
ページの作成も可能です。

記事中のタグに関わる文字(<　>含むは全て半角です)
＜div＞タグを使うと自動改行にならないようなので＜pre＞タグが必要みたいです。
見づらい画像を使用してしまって申し訳ございません。

タグ：カスタマイズ ブログ 背景 CSS