CSSバックグラウンド

背景画像のサイズ

背景画像のサイズを指定する方法です。
なお、数値で指定する場合は「auto」との組み合わせも可能です。
HTMLクイックリファレンス(background-size)

  1. 自動算出:要素 {background-size:auto;}
  2. 最大サイズに合わせて自動調整(縦横比保持):要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:contain;}
  3. 最小サイズに合わせて自動調整(縦横比保持):要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:cover;}
  4. 背景画像のサイズを指定:要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:?px ?px ?px ?px;}
  5. 背景画像のサイズを%で指定:要素 {background:url("画像ファイルのパス") no-repeat center center; background-size:?% ?%;}

背景画像の表示位置

背景画像の表示位置を指定する方法です。

要素 {background-position:横方向 縦方向;}

  1. 横方向:left、center、right
  2. 縦方向:top、center、bottom

スクロール時の背景表示

画面をスクロールする際に背景画像をどのように表示するかと言うものです。
HTMLクイックリファレンス(background-attachment)

  1. スクロールしても背景は固定:body {background-attachment:fixed;}
  2. スクロールで背景も動く:body {background-attachment:scroll;}

覗き窓

ページの背景に覗き窓を作る

ページ上(main1とmain2の間)に覗き窓を作り、bodyの背景を覗けるようにする方法です。
覗き窓はスクロールと逆方向に移動するので最初はページ下部に配置すると良いかもしれません。

htmlの書式

ページの背景に覗き窓を作るためのHTML書式です。

<body>
<div id="container">
<div id="main1"></div>
<div id="main2"></div>
</div>
</body>

CSSの書式

ページの背景に覗き窓を作るためのCSS書式です。

body {background;に背景を設定する、background-attachment:fixed;で背景を固定する}
container {background;を削除する}
#main1 {background;に背景を設定する}
#main2 {background;に背景を設定する、margin-top;などでスペースを空ける}

オンラインPC館
トップページテクニックウェブ制作 → CSSバックグラウンド