Dynamic Background Images - February 2012

If you download this tip please consider making a modest donation.

This tip-of-the-month demonstrates how to dynamically change the background image of the body, form, panel or table using VB.Net code. I have long tried various methods to change the body's background and until today have been unsuccessful. I decided to share the solution in this February 2012 tip-of-the-month.

The Demo Application

The Asp.Net, VB.Net, VS/2008 project DynamicBackgroundImage is documented using a screen capture:

Click here to run the demo application.

Click one of the buttons to change the appropriate background image.
For example: Click  the 'TableMain' button to change the tables background image.
Eight different images are distributed with this demo.
Continue clicking the buttons to cycle through the images.
Images can be found using a Google search with arguments: 'seamless repeating background'

Operative Code

Part of the Aspx Page
<body id="BodyMain" runat="server">
    <form id="FormMain" runat="server">
        <asp:Button ID="buttonNextBody" runat="server" Text="Next Body" />
        <asp:Button ID="buttonNextForm" runat="server" Text="Next Form" />
        <asp:Panel ID="PanelMain" runat="server">
            <asp:Button ID="buttonNextPanel" runat="server" Text="Next Panel" />
            <asp:Table ID="TableMain" runat="server">
                <asp:TableRow >
                    <asp:TableCell>
                        <asp:Button ID="buttonNextTable" runat="server" Text="Next Table" />
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </asp:Panel>
    </form>
</body>
Sample VB.Net Code
    Me.BodyMain.Style.Add("background-image", "url(Images/Background/00100WhiteClouds.jpg)")
    Me.FormMain.
Style.Add("background-image", "url(Images/Background/00200Floral.jpg)")
    Me.PanelMain.
Style.Add("background-image", "url(Images/Background/00700WoodFence.jpg)")
    Me.TableMain.
Style.Add("background-image", "url(Images/Background/00800Stones.jpg)")
Give the body tag an ID and set it to run at the server.
It is then possible to refer to the tag in the VB.Net code.
The same is true for the form, panel and table.

I don't know what will happen if the folder or file name contains blanks.
I did try surrounding the name with double quotes and it did not work.
Maybe single quotes will work. Let me know what you find out.

Master Pages with Pages in Subfolders

Typically I have one master page per application. And it is in the root folder. And the content pages are in subfolders. After much trial and error I found that the URL needed to point to a lower level folder. Using '../' to redirect to the lower level. The master page code behind would be similar to:

Me.BodyMain.Style.Add("background-image", "url(../Images/Background/00800Stones.jpg)")

Repeat for each level the page is higher than the master page. For example: If the page is in folder 'MyPages/Process/Login' then '../../../' would need to be used.

Inspiration

I found an inspiration for this tip at: http://www.groupsrv.com/dotnet/about28275.html. I had been using a tilde and slash with the URL and it does not work.

This does not work:

Me.BodyMain.Style.Add("background-image", "url(~/Images/Background/00100WhiteClouds.jpg)")

This does:

Me.BodyMain.Style.Add("background-image", "url(../../../Images/Background/00100WhiteClouds.jpg)")

Download the VB.Net Code

Download the source code by clicking on the zipped file name. Click here to run the demo application.

Download - Source Zipped File Size
VS/2008 VB.Net, ASP.Net Solution DynamicBackgroundImage.zip 528k

Previous Tip    Tip Index    Next Tip

Home

Updated 2012/02/14