ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >ボックス

背景色や画像を指定する

{background-color:色;} でボックスの背景に色を指定することができます。


{background-color:transparent}と指定すると ボックスの背景は透明になります。(デフォルト)

■ ボックスに背景色を指定する

【ブラウザ表示】

背景色は黄色


ソース

<p class="box8">背景色は黄色</p>

外部ファイル

p.box8{background-color:yellow;}


<body>〜</body>に直接記入する場合

<p style="background-color:yellow;">背景色は黄色</p>

■ ボックスに背景画像を指定する

{background-image:url(画像);} でボックスに画像を指定することができます。
{background-image:none}とすると ボックスに背景画像は指定しません。(デフォルト)

{background-attachment:scroll;}を指定すると ウィンドウもしくはボックス内をスクロールした時に画像も移動します。 (デフォルト)

ボックス内の画像に{background-attachment:fixed;}を 指定するとウィンドウもしくはボックス内をスクロール した時に画像を固定できます。

【ブラウザ表示】

背景画像を指定


ソース

<p class="box9">背景画像を指定</p>

外部ファイル

p.box9{background-image:url(../image/ichigo.gif);}


<body>〜</body>に直接記入する場合

<p style="background-image:url(../image/ichigo.gif);">背景画像を指定</p>

■ その他の項目

枠線の太さを指定する
枠線の種類を指定する
枠線の色を指定する
個別の枠線を一括に指定する
ボックスの横幅、高さを指定する
外側、内側の余白を指定する
背景画像の表示方法を指定する
背景画像の表示位置を指定する
ボックスを並べる
はみ出る部分を表示させる
ボックスの配置方法を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.