文字の背景にワンポイント画像を簡単に表示する方法

文字の背景にワンポイント画像を簡単に表示する方法をお伝えします。

この方法は、意外と役に立つのですが、table タグを使わなくても、
簡単に画像を文章の右側などに配置できるので、とても便利です。

たとえば、現在、ここに文章を書いていますけど、
右側にワンポイント画像が「背景」のように表示されていますよね？

画像が「背景」として表示されるため、
その画像の上に、文章を掲載することが、
簡単にできるということです。

もちろん、画像と文字が重なってしまうと、文字が見づらくなってしまう
のですが、ワンポイント画像を簡単に掲載できるので、けっこう便利な技です。

実現方法も、とても簡単なので、ぜひ活用してくださいね。

■ 文字の背景にワンポイント画像を簡単に表示する方法の手順

手順１：画像を表示したい箇所に、下記のソースを入れる。

<div style="background:#ffffff url(gazou.jpg) no-repeat 300px top;">
ここに文章を書く。<br>
ここに文章を書く。<br>
ここに文章を書く。<br>
ここに文章を書く。<br>
ここに文章を書く。<br>
</div>

div タグを使って、文章を囲むだけです。
もちろん、中の文章は、自由に変更してください。

あとは、上記のソースでは、画像は「gazou.jpg」を指定しているので、
ここは、自分の好きな画像のファイル名に変更してくださいね。

これで、文字の背景に、指定した画像が表示されます。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。

■ 表示される画像の位置の調整方法

表示される画像の位置は、上記のソースで、「300px」に
なっている数字の個所を変更することで、調整できます。

これは、「左から300px のところに、画像を表示する」と
いう意味になるので、もっと左側に画像を表示したい場合は、
「200px」などに変更するという形ですね。

あとは、自分が指定した画像の大きさに合わせて、表示を確認しながら、
調整してみてください。

なお、画像の表示を、もっと縦に伸ばしたい場合は、文字をもっと書くか、
br タグを使って、縦に長くしてあげれば良いですよ。