テキストと画像<img>の位置関係

テキスト中に画像<img>を表示するときの位置関係

p{ vertical-align : top ; }

vertical-align プロパティの値

値	説明
baseline	ベースラインでそろえる（デフォルト）
top	上端で揃える（padding合わせ）
middle	中央で揃える
bottom	下端で揃える
text-top	テキストの上端で揃える
text-bottom	テキストの下端で揃える
super	上付き文字の位置で揃える
sub	下付き文字の位置で揃える

背景画像の表示位置の指定

★背景画像の表示位置の指定

　　　p{ background-image: url(img/bg.jpg) ;

background-position : right bottom ; 　右下を指定

　　　 background-repeat : repeat-x; }

background-position プロパティの値

キーワード	説明
top	背景画像の上寄せ
right	背景画像の右寄せ
bottom	背景画像の下寄せ
left	背景画像の左寄せ
center	背景画像の中央寄せ

背景画像の指定＆繰り返し

★特定の要素に背景画像を指定する時は、

　　　p{ background-image: url(img/bg.jpg) ; }

で

★背景画像の繰り返し

　　　p{ background-image: url(img/bg.jpg) ;

background-repeat : repeat-x; }

※background-repeat　プロパティの値として利用できるのは、

値	説明
repeat	要素の背景一面に背景画像を敷き詰める（デフォルト）
repeat-x	横一列方向に背景画像を敷き詰める
repeat-y	縦一列方向に背景画像を敷き詰める
no-repeat	繰り返さない