Question

I have absolute positioned “containers” in witch my java elements are running. the background image is working responsive with the page but the “containers” are not scaling. Is there a way to make them scale with the image that they are positioned “on-top” of ? here is some of the code I’m using.

CSS

#forest2 {

    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

PHP

<div class="forest2" style = "position: relative" >
<img src = "http://xxx/wordpress/wp-content/uploads/2013/01/xxx.png">

    <div style = "position: absolute; top: 315px; left: 24px;" class="slideshow0" >
        <a href="http://xxx/wordpress/catch-test/"><img src="http://xxx/wordpress/wp-content/themes/responsive-child/images/1.jpg"/></a>
        <a href="http://xxx/wordpress/catch-test/"><img src="http://xxx/wordpress/wp-content/themes/responsive-child/images/2.jpg"/></a>
        <a href="http://xxx/wordpress/catch-test/"><img src="http://xxx/wordpress/wp-content/themes/responsive-child/images/3.jpg"/></a>
        <a href="http://xxx/wordpress/catch-test/"><img src="http://xxx/wordpress/wp-content/themes/responsive-child/images/4.jpg"/></a>
        <a href="http://xxx/wordpress/catch-test/"><img src="http://xxx/wordpress/wp-content/themes/responsive-child/images/5.jpg"/></a>
    </div>

Script statement .. if needed but probably not

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow0').cycle({
        fx: 'fade',
        random:     true,
        timeout:    6000,
        speed:      3000,
        delay:      100,

    });

Answer 1

Resolved with a different method. Adapted AS3 to work in place of java. It works with the responsive design and all the variables are passed fine.