CSSでWebページの背景画像を指定する

文：John Lee（TechRepublic）
翻訳校正：原井彰弘
2008/02/07 18:30

CSSが登場する以前、背景画像はページ全体の壁紙としてしか使用できなかった。しかし、CSSが登場したことで背景画像をさまざまな目的に活用できるようになった。本稿では、そのような活用方法を3つ紹介しよう。

　編集を行ったら、HTMLを保存してブラウザでプレビューしてみよう。ブラウザを最大化すると、背景のグラデーションが左右の方向だけでなく上下方向にも敷き詰められて表示されていることがよく分かると思う。残念ながら、途切れのないグラデーションにはなっていないのだ。そこで、リスト3で強調表示されているようにコードを修正しよう。このコードでは、ページの背景色がグラデーションの下端の青色と同じ色になるようにし、さらに画像はX軸方向にのみ敷き詰められるように指定を行っている。

リスト3

<html>
 <head>
 <title>CSS Backgrounds</title>
<style type="text/css">
 <!--
 body {
 background-image: url(gradient.jpg);
 background-color: #8393ca;
 background-repeat: repeat-x;
 }
 -->
 </style>
 </head>
<body>
<h1>Chapter One</h1>
<p>"Now Beowulf bode in the burg of the Scyldings,
 leader beloved, and long he ruled
 in fame with all folk..."</p>
<br>
<a href="#">This link will open a new window.</a>
</body>
</html>

　このHTMLをブラウザでプレビューすると、背景がとぎれなくグラデーションになっており、ページの下方までずっとそのまま青色が続いていることが分かるだろう。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
小技 フレームワーク Mac OS X C/C++ JavaScript Flash 開発環境 Leopard iPhone Ruby SOA PHP Solaris 仮想化 Webアプリケーション開発 Ajax Webデザイン Windows XHTML Apache リファレンス iPhone 3G ライブラリ 入門 Apple Tips Opera ブラウザ server Safari CSS RIA Mozilla Internet Explorer オープンソース Python Eclipse Google CSS 3 Java Microsoft イロハ Off Topic Linux Database Adobe HTML iPod touch Firefox Firefox 3
  • 話題のタグを見る »