枠の中にも書きましたが、背景は風と樹と空とフリー素材さんのものを使わせていただきます。素敵な素材ですね。

ではいきなり、上のソースです。

なお、このページの実際のソースでは自動改行を排除するため、下のコードを改行せずに書いています。詳しくはブログの自動改行問題をご覧ください。

チョー見づらいので赤い部分を分けます。

border:3px solid #0000ff;
padding:1em;
height:177px;
background:url('画像ファイルのURL') no-repeat left top;
text-align:right;

borderとpaddingはもう説明しました。新しいのは、height、text-align、それからbackgroundの右側ですね。

枠の高さと横幅

まず、height:177px。

これは使わせていただいている画像の高さが177px（ピクセル）なので、それに合わせます。合わせないとどうなるか、やってみます。

む！特に問題なく見える。さっきは画像より枠が大きくて、上に白い余白が出てたんですけどね。まあ、いいか。もし困った時は画像のサイズに合わせてみてください。

本当は、高さだけでなくwidth（横幅）も指定したいんですが、このブログでは設定できませんでした。（書いても効かない）

今回の画像は右側が白いのでわかりませんが、実はこの画像左に寄っています。だからもし画像の色が白くなかったら、画像の横幅が終わったところで、ブッツリと色が変わります。ファンブログで背景画像を使う場合は、そういった条件も加味して素材を選んだほうが苦労しません。たぶん。

続いて、background:url('画像ファイルのURL') no-repeat left top;これは

url()のかっこの中の画像を
枠の左上合わせ(left top)で
繰り返さず(no-repeat)に表示して

という意味です。

画像の位置指定

位置の指定はtopとbottom（上か下）
leftとright（左か右）で指示します。

右上あわせ background:url('画像ファイルのURL') no-repeat right top;

左下あわせ background:url('画像ファイルのURL') no-repeat left bottom;

画像の繰り返し

repeat 繰り返す
no-repeat 繰り返さない
これは下の表示を見れば説明はいらないでしょう。

←元の画像

繰り返す background:url('画像ファイルのURL') repeat left top;

繰り返さない background:url('画像ファイルのURL') no-repeat left top;

文字位置の指定

今日の記事は次の、ext-align でおしまいです。

画像に合わせて、文字の位置をずらしたい時があります。今回は、右寄せ、左寄せ、真ん中合わせの方法。上下の配置はやりません。

文字の右寄せ text-align:right

文字の左寄せ text-align:left

文字の真ん中合わせ text-align:center