Customising the category templates

I would like to edit the templates used for the category section in this way:

When the page is loaded, each category i.e books / computers / clothing etc should pick at random its own individual background image (from a range of background images).

I realise this would involve some code behind changes, but is it possible ?? My thoughts are along these lines:

Modify the ProductBox usercontrol with this code

        protected void Page_Load(object sender, EventArgs e)
        {

                // Some code here to generate a random number between 0 & 3
                System.Random RandNum = new System.Random();
                int myInt = RandNum.Next(4);

                if (productPanel.BackImageUrl != null)
                {
                    switch (myInt)
                    {
                        case 0:
                            productPanel.BackImageUrl = "../App_Themes/emmaharris/images/frame1.gif";
                            break;
                        case 1:
                            productPanel.BackImageUrl = "../App_Themes/emmaharris/images/frame2.gif";
                            break;
                        case 2:
                            productPanel.BackImageUrl = "../App_Themes/emmaharris/images/frame3.gif";
                            break;
                        case 3:
                            productPanel.BackImageUrl = "../App_Themes/emmaharris/images/frame4.gif";
                            break;
                    }

                }
               // End of new code to switch background images

        }
        }

and change the ProductBox usercontrol like this

<asp:Panel ID="productPanel" CssClass="ProductItem" runat="server">
    
    <div class="title" visible="false">
        <asp:HyperLink ID="hlProduct" runat="server" />
    </div>
    <div class="picture">
        <asp:HyperLink ID="hlImageLink" runat="server" />
    </div>
    <div class="description" visible="false">
        <asp:Literal runat="server" ID="lShortDescription"></asp:Literal>
    </div>
    <div class="addInfo" visible="false">
        <div class="prices">
            <asp:Label ID="lblOldPrice" runat="server" CssClass="oldproductPrice" />
            <br />
            <asp:Label ID="lblPrice" runat="server" CssClass="productPrice" /></div>
        <div class="buttons">
            <asp:Button runat="server" ID="btnProductDetails" OnCommand="btnProductDetails_Click"
                Text="Details" ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductID") %>'
                SkinID="ProductGridProductDetailButton" /><br />
            <asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="Add to cart"
                ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductID") %>' SkinID="ProductGridAddToCartButton" />
        </div>
    </div>
</asp:Panel>

It seems to work when I run the code whilst debugging ( I get a randomly picked image for each product), but when running on the site normally I get all the images the same. It seems that slowing the code down, helps the random get generated. Any ideas ???