サンプル
シンプルな枠に背景画像 : div012-hpl
h3，p，ulによるリンクリストを含む
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
ソース
XHTML
<div class="div011-hpl">
<h3>シンプルな枠に背景色 : div011-hpl</h3>
<p>h3，p，ulによるリンクリストを含む</p>
<p>テキストテキスト......</p>
<ul>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
CSS
div.div011-hpl {
margin: 1em 0;
border: solid 1px #999;
background: #E6FFE6 url(../img/bg-greenwall.gif);
}
div.div011-hpl h3 {
margin: 1em 15px;
padding: 0;
color: #363;
}
div.div011-hpl p {
margin: 0.5em 15px 0.5em 30px;
}
div.div011-hpl ul {
margin-left: 0;
padding-left: 0;
}
div.div011-hpl ul li {
margin-left: 60px;
list-style: none;
}
使用画像
block のカタログへ このページのトップへ
解説
backgroundプロパティには指定してありませんが，背景画像はrepeat（デフォルト値）によって敷き詰められます。画像が表示されないときにもテキストの可読性が落ちないように，またデザインの意図を損なわないように，背景色をあわせて指定しておくのがよいでしょう。ulのリストでマークアップしています。リストマークが表示されないようにlist-style: none;としてあります。リストマークを画像にする方法は