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

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

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

　さて、これらの設定でボックスの下端の設定はよいだろうが、上端の設定はどうすればよいのだろうか？ここでは、上端の設定はboxルールの内側のh1タグで行うことにしよう。

　boxルールはクラスとして宣言されているので、リスト5のようなコードを使用して、boxルールの内側にあるh1タグすべてに背景画像の属性を持たせることが可能なのだ。

リスト5

<html>
<head>
<title>CSS Backgrounds</title>
 <style type="text/css">
<!--
body {
      background-color: #8393ca;
      background-image: url(gradient.jpg);
      background-repeat: repeat-x;
}
.box {
    width: 350px;
      background-color: #ffcc00;
      background-image: url(boxbottom.gif);
      background-repeat: no-repeat;
      background-position: left bottom;
}
.box h1 {
      background-image: url(boxtop.gif);
      background-repeat: no-repeat;
      background-position: left top;
}
-->
</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>
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
開発環境 Mac OS X イロハ Python Adobe Solaris Eclipse Google CSS JavaScript オープンソース Leopard RIA CSS 3 iPod touch ブラウザ iPhone 3G PHP Firefox ライブラリ Apple Mozilla XHTML Database Linux Flash Windows 小技 Off Topic HTML Tips Ajax C/C++ 仮想化 フレームワーク 入門 iPhone Ruby SOA Internet Explorer Firefox 3 Java Webデザイン リファレンス Opera Apache Microsoft server Webアプリケーション開発 Safari
  • 話題のタグを見る »