画像

 webページで<img>を使って画像を扱う場合、大きさとその余白の調整周辺の文字の回り込み背景として表示はcssを使います。
 背景として画像を表示するには<img>は使いません。cssで任意のタグエレメントを指定して、そのbackground-imageプロパティを利用します。

大きさと余白の調整

 画像の大きさは、比率%で設定した方がよいでしょう。比率で指定した方が元の画像の感じがくずれ難いです。

#test_img{
	width: 50%;
	margin: 10px;
}

回り込み

 画像に周辺のテキストを回り込ませるには、floatプロパティを使います。

 例えば、左に画像を表示し、その画像の右にテキストを回り込み表示したい場合はfloatプロパティにleftを指定します。そして回り込みを終了させるには、直後のタグエレメントにclearプロパティを利用します。

img{ 
	float:left;
}

p{
	clear: both;
}

バックグランドイメージ

 webページのバックグランドに画像を表示するにはcssを利用します。例えば以下のようにあるdiv領域に背景画像を表示する場合です。

div {
	background-image:url(./img/img.jpg);
	background-repeat:  no-repeat;
	width: 80%;
	height: auto;
}