内容をパディングすることなく、再フォーマットCSSの背景にパディングを追加するにはどうすればいいですか？

Question

コンテンツにパディングを追加しない繰り返しの背景イメージを埋め込む方法はありますか？

フロートを使用して作成された3列のレイアウトと、コンテナが正しい高さであることを確認するためのクリアリング要素があります。ここではそのためのコードは次のとおりです。

HTML

<div id="container"> 
    <div id="col1" class="col">col 1</div> 
    <div id="col2" class="col">col 2</div> 
    <div id="col3" class="col">col 3</div> 
    <div class="clearFix"></div> 
</div> 

CSS

div#container { 
    width:340px; 
    border:1px solid #0f0; 
    margin:30px; 
    background:url(http://i.stack.imgur.com/PEE4K.png) 0 0 repeat-y; 
} 

div.col { 
    float:left; 
    width:100px; 
    height:60px; 
    margin:0px 10px; 
    background-color:#f00; 
} 

div#col1 { 
    margin-left:0; 
} 

div#col3 { 
    margin-right:0;  
} 

div.clearFix { 
    clear:both; 
} 

私の繰り返しの画像で使用する場合：

それは次のようになります。

しかし、パディングが表示されますので、私はこのように、繰り返し画像の開始とポイントを調整したいと思います：

列が拡張時にパディングがあまりにも動くことが重要です：

誰が好ましく、追加のマークアップとデフなしで、どのようにこれを達成するためのアイデアを持っていますinitely JavaScriptなしで？あなたのdiv.col CSSの定義で

http://jsfiddle.net/shanethehat/a2EKM/

Answer 1

変更これは：@BoltClockは述べてあなたが同様に緑色の枠が必要な場合は

div#container { 
    margin:40px 30px; 
} 

div.col { 
    margin:-10px 10px; 
} 

、これは動作しません。境界線を必要としないなら、ie6でもうまくいくはずです。