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: 
Seems straight forward to me, you will need two divs:

```
<div id="content">
     <div id="inner_content">
         <!-- Append image to very bottom -->
         <img src="city" width="" height="" alt="" />
     </div>
     <!-- Background image of hills goes here -->
</div>

```

CSS is straight forward..

```
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; } 

```
try this:

```
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}

```