Question

I am creating a website and need two images to overlay on top of each other, with the top image being centered, however I also need the entire block to be centered in the page so I don’t think I can use absolute positioning as I need the page to be scale-able.

I am using –

img.center {   display: block;   margin-left: auto;   margin-right: auto; }

To center images on the page.

Im not sure if I have explained this very well so hopefully the following mock-ups will help.

I have looked around into image overlaying but they all seem to use absolute positioning and I cant seem to make it work so that the images are always centered using that method.

Is there anyway to do this? if some some example code would be extremely helpful, or just a point in the right direction.

Thanks.

Answer 1

<div class="img_cont">
    <img src="1.png" alt="" class="first"/>
    <img src="2.png" alt="" class="second"/>
</div>
<style type="text/css">
    div {
        width: 300px;
        height: 300px;
        position: relative;
            margin: 0 auto;
    }

    .first {
        width: 100%;
        height: 100%;
    }

    .second {
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(".home_click").css("left", ($(".img_cont").width() - $(".second").width()) / 2 + "px");
    $(".home_click").css("top", ($(".img_cont").height() - $(".second").height()) / 2 + "px");
</script>