1

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:

enter image description here

It looks like this:

enter image description here

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

enter image description here

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

enter image description here

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

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

shanethehat
  • 15,460
  • 11
  • 57
  • 87

1 Answers1

2

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.

roberkules
  • 6,557
  • 2
  • 44
  • 52
  • That shrinks the container and pushes the columns beyond its top and bottom borders. It doesn't add padding to the container's background. That said, if you also change the container's `border` style to an `outline` style, the desired result will be achieved in Firefox and whatever browsers that draw their outlines that way. – BoltClock Jan 18 '12 at 18:29
  • well, the result looks the same, no? worked for me: http://jsfiddle.net/roberkules/a2EKM/3/ – roberkules Jan 18 '12 at 18:43
  • No, they look completely different. In the example, the green border still goes around the columns. In your fiddle, the green border only goes around the background, obscured by the columns. – BoltClock Jan 18 '12 at 18:45
  • 1
    yes, but i thought that the green border is just there to understand the question, not as part of the final design – roberkules Jan 18 '12 at 18:50
  • Good point, I hadn't thought about that... maybe I should scrap my answer as well, since it takes that border into account. – BoltClock Jan 18 '12 at 18:57
  • why to scrap it, your's would be preferable if the border is needed (with some fallback for <=ie8). and also preferable if ie8 wouldn't matter. – roberkules Jan 18 '12 at 19:03
  • The border isn't actually required, it was to illustrate the container only. This would have to be used alongside other elements though, so at least one more contain is probably going to be required. I'll give it a try later. – shanethehat Jan 18 '12 at 19:16
  • 2
    The negative margins will also shift the columns up 10 pixels. You can simply push the container back down with extra margins on the container to reverse that, so for -10px vertical margins on the columns, you would increase the vertical margins on the container by 10px, so `margin:40px 30px`. – BoltClock Jan 18 '12 at 19:18