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 will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.

So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.

The resulting CSS will be something like this:

```
div#wrapper {
  width: 100%;
  background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
  width: 800px;
  margin: 0 auto;
  /* background can be offset to the left or right if the width is fixed
     if not it must be centred */
  background: url(road.png) right bottom no-repeat;
}

```

And the HTML:

```
<body>
  <div id="wrapper">
    <div id="content">
      <p>Some content here</p>
    </div> <!-- content -->
  </div> <!-- wrapper -->
</body>

```

The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!

Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).