Question: I have a site that has a fairly complicated footer, see <http://www.roadsafetyforchildren.co.uk/>, not really sure how to attempt to build it:

![Footer](https://i.stack.imgur.com/Hbfl3.jpg)

I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
![enter image description here](https://i.stack.imgur.com/VGnXE.jpg)

The second part needs to repeat horizontally but stay in line with the image above.
![enter image description here](https://i.stack.imgur.com/hQuU7.jpg)

Therefore the two images needs to look like the first image at the top of the question.

I can match the two images up **IF** the content div above it has a fixed height. The problem is the content div **NEEDS** to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.

How can I keep the two images lined up with a flexible content div above it?

P.s There's a lot of answers but don't think a few of them have understood the question.

Answer: 
Whatever `<div>` the content is in should be `height:auto` and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the `<div class="footer">` should be `float:left`. That way the footer will always be below the content, and whatever height the content is will have a repeating background.

No need to mess with PS, except to create the bg image for the content.

This would be the bg image for content div, and repeat-y so it repeats from the top down:

![](https://i.stack.imgur.com/B8aa0.jpg)

And the footer image:

![enter image description here](https://i.stack.imgur.com/X9r2x.jpg)

And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:

```
div#footer {
    background: url('roadpic.jpg') bottom center no-repeat;
}

<div id="content">your content goes here</div>
<div id="footer">...</div>

```

which will keep the footer div below the content at all times.