Okey so basically I have:

```
<div id="content">
  ... content of arbitrary size ...
</div>
<div id="content_bottom"></div>

```

The style is:

```
#content {
    background: transparent url(content_tile.png) center top repeat-y;
    width: 800px;
}
#content_bottom {
    background: transparent url(content_bottom.png) center top no-repeat;
    height: 200px;
    width: 800px;
}

```

`content_tile.png` is a `800x1` image (tiles vertically), and has transparency.
`content_bottom.png` is a `800x200` image.

Basically, I need to have the `content_bottom.png` image to replace the `#content` background image only on the bottom.
Having a negative margin on `#content` almost works, but since both images are transparent images, they overlap, and it should not happen.

I think that I need to make `#content` not to render its background on the last 200px on its bottom.
Any idea how I could do that ?