背景画像と重ならない文字配置

---

img画像と文字は基本的に重なることは無いですが、背景が画像の場合はその上の文字と
重なってしまう事があります。

その重なりを避けるにはスタイルシートを使います。

画像や文章がどのように配置されているかのイメージ

下は背景の上に画像と文章が配置されたイメージです。通常は上から見ているものと思って
ください。画像と文章は同じ高さにあるので上から見ても重なっていません。

横から見たイメージ

上から見たイメージ

背景画像は文章と重なる事がある

しかし、背景が画像の場合、上の文章と違う高さにあるので重なる事が考えられます。

重ならないためには、どちらかをずらさなければなりません。

敷地の上に立っている人に合わせて敷地を動かすのは無理です。
やはり、上に載っているものを動かさないといけません。ということで文章を動かします。

横の配置位置を変えるtext-align

これは以前「枠の中の背景に画像を使いたい！」で説明しました。
背景画像をずらす方法も「枠の中の背景に画像を使いたい！」に書いてあります。

文章の縦の配置にはline-heightが使える

line-heightについては「ナビゲーションをつけるの巻」で説明しました。

下の画像は高さが45ピクセルです。ただし、車の屋根が10ピクセル飛び出しているので、
オレンジの部分は画像の上から10ピクセル目からです。

marginとpadding

marginについては「画像の隣に文章を配置したい」で
paddingは「色つきの枠で文章を囲みたい」で取り上げました。

下の3つは全部、text-align:left;lineheight:45pxを指定済みです。

---