[css] 三段組みの(可変)背景画像 - immovabletype


[css] 三段組みの(可変)背景画像

(html)
<div class="post">
 <div class="body">
    コンテンツ内容
 </div>
 <div class="bottom"> </div>
</div>

(css)
.post {
  padding-top:4px;/* ←top.jpgの高さ*/
  background:url(images/top.jpg) no-repeat left top;
}
.post .body {
  background:url(images/body.jpg) repeat-y left top;
}
.entry3 .bottom {
  height:4px;/* ←bottom.jpgの高さ*/
  background:url(images/bottom.jpg) no-repeat left bottom;
  font-size:1px;
  line-height:1px;
}

参照:CSSサンプルプログ

コメントの投稿