Make an image stay in place
I needed to be able to place an image on the right hand side of the screen, and stay there, even when the window was scrolled. It took a bit of finding, but thanks to Google and W3 I was able to find what I needed.
In your (custom) css file, add the following code:
div.stickyright {
position: fixed;
right: 0;
top: 35%;
width: 30em;
margin-top: -2.5em;
}
This allows an image, if enclosed by a <div class="stickyright"></div> to be displayed on the right hand side of the screen, and as the website is scrolled up and down, it remains in place. You may alter it's positioning by chaning the percentage of "top" to move it up or down the screen.
Also the "width" can be changed to move the image left or right to fit more on screen or nearer the right hand side of the screen.
You could also change right to left if you want the same effect on the left hand side of the website.
The effect can currently be seen on a development site here.