スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.画像を2枚以上使って背景画像固定したいんだけどできる?[3]

A.
ヤプログの表示モードは2007年4月2日現在 過去互換モードです。
それに合わせてスタイルシートを修正し、メインテンプレート、アーカイブテンプレート、1記事テンプレートを追加・修正するとできます。
以下、変更方法


1.
左下固定、右上固定、右下固定の3箇所の背景複数固定を例として説明します。

メインテンプレートの11行目付近に
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
というのがあります。

アーカイブテンプレート、1記事テンプレート共に11行目付近にあります。

2.
1.の赤文字のところを削除します。

実際に削除すると
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
こんな感じになります。

3.
2.のすぐ下に1行挿入し
<div id="wrap1"><div id="wrap2">
と追加します。

4.
メインテンプレートの一番下と下から2行目に
</body>
</html>

というのがあります。

アーカイブテンプレート、1記事テンプレート共に同じく一番下・下から2行目にあります。

5.
4.の前に
</div></div>
を追加します。

実際に追加すると
</div></div></body>
</html>

こんな感じになります。

6.
スタイルシートの一番上に
body
{
margin: 0px;
padding: 0px;
background-color: #fff;
background-image: url("画像URL");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
overflow:hidden;
}
#wrap1
{
margin: 0px;
padding: 0px;
background-color: transparent;
background-image: url("画像URL");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
min-height: 100%;
width: 100%;
height: 100%;
overflow:hidden;
z-index:1;
}
#wrap2
{
margin: 0px;
padding: 0px;
background-color: transparent;
background-image: url("画像URL");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
min-height: 100%;
width: 100%;
height: 100%;
overflow: auto;
z-index:2;
}


を追加します。
スポンサーサイト
[ 04/02 ] [背景]3カラムpink | トラックバック(-) | コメント(-)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。