Question

I am dealing with a short deadline here, so I will ask this question without having investigated this in depth yet. Although I blieve it’s a good question that may interest alot of people dealing with Magento.

I have been ask to do some modifications on a Magento eshop. Among other things I need to use the category image of each category as a full resizable background image, using this (or a similar) plugin – http://johnpatrickgiven.com/jquery/background-resize/

Any help would be greatly appreciated.

Answer 1

To your theme’s layout add the following as local.xml

<layout>
    <catalog_category_default>
        <reference name="before_body_end">
            <block type="catalog/category_view" name="back.image" template="page/html/back.image.phtml" />
        </reference>
    </catalog_category_default>
    <catalog_category_layered>
        <reference name="before_body_end">
            <block type="catalog/category_view" name="back.image" template="page/html/back.image.phtml" />
        </reference>
    </catalog_category_layered>
<layout>

Next, in the theme’s template create a file page/html/back.image.phtml

<?php if ($this->getCurrentCategory()->getImage()): ?>
<div id="back_frame">
    <img class="back_image" src="<?php echo $this->getCurrentCategory()->getImageUrl() ?>" alt="<?php echo $this->getCurrentCategory()->getName() ?>" />
</div>
<?php endif ?>

Lastly add something like this to your theme’s CSS.

.page {
    position: relative;
}
#back_frame {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
#back_image {
    width: 100%;
}

I haven’t actually tested any of this but it seems simple enough to work. Certainly it’s much too simple to need javascript!