Issue with position of slideshow relative to overlaying transparent border image

[CraziestOzzy]

Firstly, could you please have a look at the website I am making for myself glennhall.net.au (http://glennhall.net.au/) and you will get an idea of what I am trying to do.
I am no web master guru, don't know anyone locally to help me in person and I have done my best to explain things.

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 (https://github.com/scottjehl/picturefill) to deliver images to a responsive slide show. The slideshow is using responsiveslides.js (http://responsiveslides.com/).

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 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 (http://glennhall.net.au/web_template.zip).

I have some relevant code for you here below.


<div class="article-row"><!-- just normal paragraph formatting and position -->
<img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
<div class="rslides" id="slider1"><!-- this is the slideshow -->
<li><!-- each image to slideshow is enclose in a "li" tag -->
<div data-picture data-alt=""><!-- for browsers with no javascript -->
<div data-src="images_slider/1_180.jpg">
</div>
<div data-src="images_slider/1_375.jpg" data-media="(min-width: 400px)">
</div>
<div data-src="images_slider/1_480.jpg" data-media="(min-width: 800px)">
</div>
<div data-src="images_slider/1_768.jpg" data-media="(min-width: 1000px)">
</div>
</div>
</li><!-- following images removed for simplicity here -->
</div>
</article>

You will notice that
<img src="img/front-cover.png" class="image_overlay"> and
<div class="rslides" id="slider1">
both are enclosed by
<div class="article-row">
The position of the transparent border
<img src="img/front-cover.png" class="image_overlay"> is ABSOLUTE and the slideshow
<div class="rslides" id="slider1"> is RELATIVE (I think) to the div "article".

The CSS code defining the above html tags I believe to be relevant is here:

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

#slider1 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}

.image_overlay {
position: absolute;
z-index: 5;
bottom: auto;
left: 0;
width: 100%;
height: auto;
}



I have sort of come up with something that works (but is not included in the demo I provide (I don't want to cloud you with my confusion) almost perfectly by enclosing
<div class="rslides" id="slider1"> in a div with padding, using percentage values rather than fixed pixel dimensions:

I have changed:

<div class="article-row"><!-- just normal paragraph formatting and position -->
<img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
<div class="rslides" id="slider1"><!-- this is the slideshow -->

to


<div class="article-row"><!-- just normal paragraph formatting and position -->
<img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
<div class="innerframe">
<div class="rslides" id="slider1"><!-- this is the slideshow -->

the CSS for "innerframe" class is set at

.innerframe {
padding: 9% 6% 9% 6%;
)


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.

[jscheuer1]

I think that in order to do what you want, you have to either abandon picturefill and find a way to resize the images in the slideshow based upon % like you do for the overlay. Or keep picturefill and use it on the overlay image as well, matching up different sizes of it to whatever sized images are picked for the slideshow.

[CraziestOzzy]

Thanks for your time and effort you put into providing me a solution.
Picturefill was the smallest and easiest script that I know of that resized images and image file size at the same time and also allowed me to incorporate that same function into a slideshow.
I will be using picturefill on the transparent overlay as well and have not got around to that next step. From what you advise, I think I should.
I will apply picturefill to the overlay image and see what happens but I also see (from what you said) that I need to exactly match up all images for each size group in an editor such as photoshop before I do. That way, the slideshow images will fit inside the overlay frame...I hope!
I will play with the images, code and apply your advice and will get back to you.
Thanks so much for allowing to think outside the box.

[CraziestOzzy]

Thanks for helping me to think outside my own line of thought.
I have since resolved the issue of positioning the slideshow and the transparent frame to fit as it should
As the website reference to my problem will be removed shortly, it will be hard to provide a working example for future reference.

What I can say, is that I removed the frame overlay image from the html and placed the reference to the image inside CSS. I was then able to use a combination of background-image:url('...'), background-position:center, background-size:X% (where "X" is any value that will fit the frame outside the slideshow. I also set the slide show to have a z-index:-1 (with a position attribute to make z-index work) and that made the slideshow display behind the frame.

I also was able to use media queries to dish up appropriate sized frames to save on server bandwidth.
The most important pointer and something I darn well missed, was to have the slide show images SIZED to fit inside the frame in photoshop (my image editor) before even starting with any coding...DOH!!!

Everything now fits, regardless of what screen size dimension is used.
I am now happily resizing my display, enjoying the feeling of having everything work :cool:
Thanks again.