ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&CSS講座 > 背景を変更する

背景を変更する

投稿日:2006年12月19日   レベル:初心者    ソフトウェア:DreamWeaver
背景を変更する 画像を背景に使用するコードはbackground-image: url (image.gif):,で、使用する画像のアドレスを変更することを忘れずに。例えば、url(image/image.gif)・・


Step1 − 属性、値と説明
繰り返しの背景
次の設定に従います: repeat-x/ repeat-y/ repeat/ no-repeat
repeat-xは水平方向の画像の繰り返しを決定します。
repeat-yは垂直方向の画像の繰り返しを決定します。
repeatは水平、垂直両方の画像の繰り返しを決定します。
no-repeatは一つだけの画像を表示します。

Step2 − 背景のポジション
次の属性に従います:top/ center/ left/ right
背景の位置はページの上下左右方向に対してのパーセンテージで指定できます。

Step3 − 背景の付属
スクロールするか、固定するかを決定します。つまり、スクロールバーを使用したページにおいて、background-attachment:fixedはページがスクロールしても背景の表示がかわりません。ページ内容がスクロールダウンしても、背景は動きません。background-attachment:scrollはページのスクロールに合わせて背景もスクロールします。スクロールダウンしていけば、最初に見えていた背景は直に見えなくなってしまいます。文章で説明すると分かりにくくなってしまいますが、あなた自身が試しに作ってみることで確かめてみてください。

Step4 − ソース

<html>
<head>
<title>More CSS Background Tips</title>

<style type="text/css">
body {
background-image: url(images/image.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>

<body>
</body>
</html>

上に例を紹介します。ここでは背景画像を”image.gif”として、繰り返し無しで中央に配置、スクロールしないように設定しています。

引用:Web Design Library 著者:Joseph Skidmore翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング