Firstly, could you please have a look at the website I am making for myself glennhall.net.au and you will get an idea of what I am trying to do.
I can't afford to pay 600 bucks to get the local website developer to produce a single page. I think his rates are over the top and everyone in my town has the same template. Not what I want.
About the structure of the website I am making:
I am using picturefill.js to send appropriate sized images based on media queries. That's why the images in this test website are numbered for you to see what's happening.
I have removed nearly everything from the html to present the issue clearly, so there may be some fat in the ,css and .js side of things.
I have then combined picturefill.js to deliver images to a responsive slide show. The slideshow is using responsiveslides.js details of script found here.
With the slideshow behaving properly, I then included a transparent border image to frame the slideshow. That's where I have been stuck for the past week.
I wish to have the slideshow position itself inside the inner frame of the transparent image and KEEP that position regardless of any change to window size or orientation of display (tablets etc).
I have numerous solutions found on the internet and have come to the point where I am at a blank, where a simple fix to a simple problem now seems like a huge muddled mess. I simply need help.
To help you, here is the complete website, compressed into a zip file - website template
I will be forever grateful to be offered a working solution, that fits the slideshow inside the transparent border image and keep that position regardless of which display is used.