自分でするSEO対策・検索エンジン最適化対策！

スタイルシートの匠技

背景画像をスクロールしても固定させたままにする

通常は、画面をスクロールするとそれと連動して背景画像も動くのですが、 サイトによっては、画面をスクロールしても背景画像が動かない場合があります。 この手法を紹介します。ただ描画に対するメモリ消費が大きいと思うので、 多様はあまりしない方が良いと個人的に考えています。

これは実際に大きな背景画像を用意しないと確認しづらいと思うので、 各自で大きな背景画像を取得して来て下さい。 その背景画像のファイル名を「background.jpg」と仮定して話を進めます。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      body
      {
         background-image: url('./background.jpg');
         background-attachment: fixed;
      }
   </style>
</head>
<body>
   <h1>壁紙の指定</h1>
   <p>画面がスクロールしても背景画像を固定するためには、
   background-attachment属性を使い、fixedを指定します。</p>
</body>
</html>

この程度の記事では画面がスクロール…という事にはならないので、 スクロールするように意図的に作ってみて確認して見て下さい。