I've got a sticky footer for my site which was accomplished with the following.

```
html {
    position: relative;
    min-height:100%;
}

body {
    margin: 0 0 100px;
    text-align: center;
}

footer {
    position:absolute;
    left:0;
    bottom:0;
    height:100px;
    width:100%;
    background-color:red;
}

```

This works well. When the content is short, the footer sticks to the bottom:

[![Sticky footer 1](https://i.stack.imgur.com/97tOd.png)](https://i.stack.imgur.com/97tOd.png)

When the content is long, the footer is pushed down:

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

I now want to place an image on either side of the page sitting on top of the footer, like this: (the grey boxes represent the images)

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

When the content is long and the footer is pushed down, the images should move down too:

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

However, when the content is so long that the footer is outside of the viewport, the images should remain stuck to the bottom of the screen, like so:

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

I have tried so many combinations of position and display that I've lost track, so would really appreciate some guidance on whether what I'm trying to achieve is possible and if so what is required. I am happy to use JQuery if that would be useful in accomplishing this goal.