背景画像
背景画像をつける場合は、
background:url(画像のURL);
というタグを使います
<div style="width:横幅px; height:縦幅px; overflow:auto; background:url(画像のURL);">文字</div>
画像の表示の仕方を決めましょう
それにはbackground-repeatというタグを使います
repeat
縦横全面に画像を繰り返します
repeat-x
横にだけ画像を繰り返します
repeat-y
縦にだけ画像を繰り返します
no-repeat
１回だけ画像を表示します
<div style="width:横幅px; height:縦幅px; overflow:auto; background:url(画像のURL); background-repeat:○;">文字</div>
上でrepeat-x,repeat-y,no-repeatを設定した場合は、その画像の位置を決めます
それにはbackground-positionというタグを使います
no-repeatを設定した場合には下のすべてが使えますが、
repeat-x,repeat-yのどちらかを設定した場合には使えるものが限られます…わかりますよね？
center
真ん中に表示されます
right
右に表示されます
left
左に表示されます
top
上に表示されます
bottom
下に表示されます
right top
左上に表示されます
right bottom
左下に表示されます
left top
右上に表示されます
left bottom
右下に表示されます
<div style="width:横幅px; height:縦幅px; overflow:auto; background:url(画像のURL); background-repeat:○; background-position:○;">文字</div>
スクロールしたときに画像を固定するか否かも設定します
それはbackground-attachmentというタグで決めます
fixed
背景画像が固定されます
scroll
スクロールすると背景画像も移動します
<div style="width:横幅px; height:縦幅px; overflow:auto; background:url(画像のURL); background-repeat:○; background-position:○; background-attachment:○;">文字</div>
© Rakuten Group, Inc.
