Question

Is there any way to pad a repeating background image that will not also add padding to the content?

I have a 3 column layout created using floats, and a clearing element to ensure the container is the right height. Here is the code for that:

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(https://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;   
}

When used with my repeating image:

It looks like this:

But I would like to adjust the start and points of the repeating image so that padding appears, like this:

It is important that when the columns scale the padding moves too:

Does anyone have an idea how to achieve this, preferably without additional markup and definitely without JavaScript?

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

Answer 1

change this in your div.col css definition:

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

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

as @BoltClock remarked, this doesn’t work if you need the green border as well. if you don’t need the border this should work fine even in ie6.