I have a user control called Footer.ascx, in which a background image
is inserted like so:

<div id="footerdiv" style="background-image:url('Images/
mybackground.jpg'); background-position:center; background-repeat:no-
repeat;">  <!-- My footer content goes here.  --> </div>

This Footer.ascx is under a folder called /UserControls (the leading
forward slash indicates the root of the web application, same below).

The /Images folder is directly under the root just like /UserControls.

If I use this user control in pages directly under the root such as /
Page1.aspx, /Page2.aspx, the background image shows up nicely.

But if I try to use it in web pages under another folder such as /
SystemAdmin/AdminPage1.aspx, the background image does not show up.

Apparently, when I use this Footer.ascx user control in pages directly
under the web root, IIS is able to locate the path Images/
background.jpg from the root.

But, if I use it in pages under /SystemAdmin/, IIS wouldn't be able to
locate the relative path Images/background.jpg because there is no
such thing under /SystemAdmin.

Now, do I have to create another user control Footer2.aspx for /
SystemAdmin folder just because of the path problem?  How can I use
the same user control in different folders and have the background
image shows up nicely?

I tried ~/Images/mybackground.jpg, but because that div and style
setting is client side, it does not work.  Is it possible to use
Server.MapPath inside the style setting?  I tried, but could not get
it to work.

Please share your insights.  Thanks a lot!