CSSで要素の左側に画像を背景として配置する

要は、フッターなどでこういうデザインを実現したいときってことです。

text自体は左寄せで、p要素は右寄せ。そいでそのp要素の左側に画像を背景として配置する、ということです。

HTML

<div id="footer">
<p>仙台で働くウェブ屋さんの技術メモ<br />
Copyright (C) 2008 igarashi of MagicalRemix&Co.</p>
<!--/footer--></div>

span や div を使ってみようかとも思いましたが、装飾のためにHTMLに記述増やすのはちょっと…ってことで、HTMLはそのままでCSSでどうにかしました。

背景イメージ

背景イメージbgfooter.gifを用意します。

CSS

#footer p {
	float: right;
	padding-left: 30px;
	background: url(img/bgfooter.gif) no-repeat left center;
}

paddingは背景イメージbgfooter.gifの大きさに応じて任意で。
floatしてますので、clearfixなどでクリアするのを忘れないように。