Does perch:pages only work in navigation templates?

I have a extended set of attributes that asks the user for a page image/thumbnail:

<perch:pages id="pageImage" label="Menu Image" type="image" divider-before="Set Menu Image for Page" suppress="true" width="480" />
<perch:pages id="pageImage" type="image" suppress="true" width="768" />
<perch:pages id="pageImage" type="image" suppress="true" width="960" />
<perch:pages id="pageImage" type="image" suppress="true" width="1280" />

I do this because to my knowledge the only way of accessing/looping through content from other pages is if it exists as an attribute.

This code in my navigation template works fine and the image is returned where required:

<perch:before>
<div class="homeMenu section">
    <div class="wrapper">
        <div class="serviceBlocks section">
</perch:before>

        <a href="<perch:pages id="pagePath" />" class="serviceBlock">

            <h6><perch:pages id="pageNavText" /></h6>
            <div class="image">
                <div class="bg service<perch:pages id="perch_item_index" /> clearfix"><span></span></div>
            </div><!--/.image-->

            <style type="text/css">
                @media only screen {    
                    .bg.service<perch:pages id="perch_item_index" /> {  
                        background-image: url(<perch:pages id="pageImage" width="960"/>);   
                    }   
                }   


                @media only screen and (max-width: 480px) { 
                    .bg.service<perch:pages id="perch_item_index" /> {  
                        background-image: url(<perch:pages id="pageImage" width="480"/>);   
                    }
                }
            </style>

        </a><!--/.serviceBlock-->

<perch:after>
        </div><!--/.serviceBlocks-->
    </div><!--/.wrapper-->
</div><!--/.homeMenu section-->
</perch:after>

However when using more or less the same code in a content template, the template fails to return anything for the <perch:pages id="pageImage" width="960"/> or <perch:pages id="pageImage" width="960"/>.

Passing them into the template as variables isn't really an option as the variable defaults to one image size.

<div class="image">
                <div class="bg service clearfix"><span></span></div>
            </div><!--/.image-->

            <style type="text/css">
                @media only screen {    
                    .bg.service {   
                        background-image: url(<perch:pages id="pageImage" width="960"/>);   
                    }   
                }   


                @media only screen and (max-width: 480px) { 
                    .bg.service {   
                        background-image: url(<perch:pages id="pageImage" width="480"/>);   
                    }
                }
            </style>

When passing the 'pageImage' attribute through it always defaults to the 480 width, is there a way of controlling which size gets sent through?