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

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

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

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

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