木更津SEO対策・君津SEO対策 きさらずSEO対策 きみつSEO対策 ホームページSEO対策 作成・制作、Xoops SEO対策・Geek SEO対策・CMS SEO対策の構築・管理・運営とSEO対策、木更津でSEO対策・君津でホームページ作成・制作・富津でSEO対策・袖ヶ浦でホームページ制作・作成・かずさでSEO対策・上総地区でホームページ作成・制作とSEO対策をする。
ホームページ作成・制作とSEO対策なら2land.net。
木更津・君津地区でHP制作・作成やSEO対策なら。
XoopsやGeekやCMSのホームページをインストール・構築・管理・デザイン・インストール・設定も

自分でする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>

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