まほ〜のあいらんどけんきゅ〜

背景指定CSS

  1. 個々のプロパティに値を指定
  2. backgroundプロパティに一括指定
  3. 複数画像を背景にする。
  4. 壁紙２枚固定

背景の壁紙の表示位置、繰り返しの指定、余白の色、壁紙の固定などをCSSで一括指定することができます。
これらは、個々に指定することもできますが、一括してbackgoundプロパティで記述することも可能です。

1.個々のプロパティに値を指定

まずは、個々のプロパティを把握するために、個々に指定するパターンの記述から見てみましょう。

<style><!--body{プロパティ名1:値1;プロパティ名2:値2;プロパティ名3:値3・・・}--></style>

という風に、{と}の間に;で区切って「プロパティ名:指定する値」を記述していきます。

キーワード表示位置
top上端
center中央
bottom下端
left左端
right右端

背景画像の位置指定に関してはキーワードでの指定も可能です。 垂直方向への指定は、top,center,bottom、 水平方向への指定は、left,center,,rightを半角スペースで区切って指定。 片方だけ指定すると、もう一方はcenterになります。 pxと%は組み合わせて使用可能ですが、キーワードとの併用はできません。 background-repeatがno-repeatでない場合は、指定した位置を基点にして繰り返し敷き詰められます。

2.backgroundプロパティに一括指定

それでは、一括して指定する方法です。

<style><!--body{background:★ ☆ ▲ △ ■}--></body>

backgroundプロパティに対して、半角スペースで区切って任意の順番で記述するだけです。 記述しなかった値にはデフォルトの設定が適用されます。 Netscape7.1ではなぜか一括表示だと表示できないことがあるようです。 （CSSを外部ファイルにした場合とかMac版Netscape7などで表示されないことがある模様） NNでの表示を考慮すると、個々に指定した方が無難です。

例1.<style><!--body{background:black repeat-y #000000 url("背景画像URL") fixed}--></style>
サンプル1
例2.<style><!--p{background:center center fixed url("背景画像URL") no-repeat navy}--></style>
サンプル2

3.複数画像を背景にする。

それぞれの要素にbackgroundプロパティを使って背景を複数表示することもできます。 z-indexプロパティは要素の重なり順を指定しています。 0で一番下、次いで数が増えるごとに上に重なります。 最後のdiv要素を上に重ねてテキストを上に表示するわけです。 各要素には、positionプロパティにabosoluteを指定しておきます。 下記の例では、左右にたてに連続した背景画像を指定しています。 heightの値はHPの長さによって適当に調整します。 下記のソースの後にページの内容を記述していきます。

<style><!--.d1{background:url("左URL") repeat-y;position:absolute;left:0;top:0;z-index:0;width:50%;height:200%}.d2{background:url("右URL") repeat-y top right;position:absolute;right:0;top:0;z-index:1;width:50%;height:200%}.d3{position:absolute;z-index:2}--></style><div class="d1"></div><div class="d2"></div><div class="d3">
サンプル3

4.壁紙２枚固定

body要素に対して壁紙を２枚固定することは不可能ですが、divなどの要素を絶対配置して、そのボックスに対して固定した壁紙を配置し、 body要素のoverflowプロパティをhiddenに、中にある要素をoverflow:autoにすることによって、擬似的に壁紙を２枚固定しているように 見せることができます。

ただし、それなりにCPUに負担がかかるので、他のJavaScriptやCSSと組み合わせたり、 スペックに余裕のないPCで見るのには問題があると思います。 使用には注意が必要です。

以下がソースですが、iらんどでは改行を抜いて使用しなくてはいけないのと、CSS部分は長いので外部ファイルにしなくてはいけません。 

<html>
<head>
<title>壁紙２枚サンプル</title>
<style type="text/css"><!--
body{
	margin:0;
	overflow:hidden
}
#left{
	background-image:url("左側の壁紙URL");
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:left bottom;
	height:100%;width:50%;
	position:absolute;
	left:0;bottom:0;
	z-index:0
}
#right{
	background-image:url("右側の壁紙URL");
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:right top;
	height:100%;width:50%;
	position:absolute;
	right:0;top:0;
	z-index:1
}
#text{
	margin:0;
	overflow:auto;
	height:100%;
	width:100%;
	position:absolute;
	z-index:2
}
#naka{
	margin:1em
}
--></style>
<body>
<div id="left"></div><div id="right"></div>
<div id="text">
<div id="naka">

ここに内容を書いていく。

</div>
</div>
</body>
</html>

一応サンプルも示しますが、マシンスペックに自信のない方は自己責任で見てください。 IE6.0,Netscape7.1,Mozilla Firefoxではそれなりに表示されましたが、Opera7.53だと微妙にずれます。 下にリンクがあるので、divの終了タグを抜いてあります。

壁紙２枚固定サンプル
[PAGE TOP] [HOME]
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送