スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-10 領域の背景を設定する

 DIV領域やテーブル、画像など、面の領域があるタグには、背景をスタイルで設定することができます。背景には、特定の色か画像が設定でき、背景画像の繰り返しの仕方や、スクロールしたときの背景画像の動き方も設定することができます。
 また、背景画像の配置の位置をいろいろと設定することもできます。
 ただし、画像<img>タグでは、余白(padding)を設定していないと背景は現れません。

 この連載では、550ピクセル×300ピクセルの方形にいろいろな背景を設定することで勉強していきたいと思います。

1.色の背景

金色(gold)の背景を設定します

background-color:gold;


<div style="width:550px;height:300px;background-color:gold;"></div>


2.画像ファイルの背景

次の画像ファイルを背景にします

background-image:url(画像のURL);




<div style="width:550px;height:300px;background-image:url(http://blogimg.goo.ne.jp/thumbnail/3d/fc/0848136fdd1ae94e49c64d8cd3aa5576_s.jpg);"></div>


3.背景の繰り返し設定

background-repeat:no-repeat; background-repeat:repeat-x; background-repeat:repeat-y;
それぞれ繰り返しなし、水平方向だけ繰り返し、垂直方向だけ繰り返しです


<
<no-repeatに> <repeat-xに> <repeat-yに> <repeatに>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。