スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Home ＞ HTML&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件

2012年4月の人気記事ランキング