How can I overlap 2 images on image product in Magento?

Question

In Magento 1.9.0.1, how can I overlap 2 images on image product (product page) and resize they in the same way as image product resize on changing resolution?

I tried with css pseudo-element (:before and :after) but I'm not able to resize and to be honest I noticed strange behavior (images initially isn't shown and appear only when you resize Chrome/Firefox window...).

.product-image.product-image-zoom.zoom-available:before {
    content: url("/media/css/image_top.png");
    z-index: 10;
    position: absolute;
    top: -6px;
    left: -5px;
}

.product-image.product-image-zoom.zoom-available:after {
    content: url("/media/css/image_bottom.png");
    z-index: 10;
    position: absolute;
    bottom: -4px;
}

So alternatively, I tried to insert the images through html in view.phtml

......
<div class="product-img-box">
    <div class="product-name">
        <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
    </div>
        <img src="media/css/image-top.png">
        <img src="media/css/image_bottom.png">        
        <?php echo $this->getChildHtml('media') ?>
</div>
.......

and with similar css I was able to place it in right position but... I don't know how to "bind" resizing with product image so they can scale "togheter" (image product, image-top.png and image-bottom.png) like if they was a only one image.

Image1: http://s30.postimg.org/7fnfl2yrl/screen.png

Image2: http://s30.postimg.org/78z4gzh0x/screen3.png

Also please edit this question to include some of the CSS you have been attempting so we may understand better. — clockworkgeek, Sep 19 '14 at 09:50
Thank you for your reply. I edited post. I'll do better then I can to improve reputation. — KaMZaTa, Sep 19 '14 at 20:20

score 0 · Accepted Answer · answered Sep 20 '14 at 15:30

I'm just a dumb, I realized now that in view.phtml

<?php echo $this->getChildHtml('media') ?>

call file /template/catalog/product/view/media.phtml so I put my <img> inside

<div class="product-image-gallery">

container and now they resize correctly. For "micro-adjust" resizing of image-top.png that less wide of div container I added some padding-right.

How can I overlap 2 images on image product in Magento?

1 Answers1