Image path problem in user control

[gnewsgroup]

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!

 

[MohammedElSayed]

Hello gnewsgroup
Well, your problem is simple, before going to the sollution let's explain why this happened.
In asp.net, if you specified a path in a HTML control, asp.net will try to reach this path from the current Execution path wich is the current page path in the webserver. so when you place your user control in a page on the root directory, asp.net evaluates your path as ( Images/
mybackground.jpg ) because it's in the root directry.
but when you place this user control in a page inside another root, asp.net will get the current execution path of the current page ( let's say you have a folder called websitePages and have a page there which you place your user control inside) then asp.net will evaluate your path as following : <root>/websitePages/Images/mybackground.jpg.
and since there is no image at this path, the image will sure not be shown.
a little workaround this problem is to make the cotrol that holds the image a server control and give the relative path of the image insted of assigning it with CSS just like the example below :

<div id="footerdiv">
<img runat="server" style="[I]Set Your Style Here[/I]" alt="mybackground" src="~/images/mybackground.jpg" />
 <!-- My footer content goes here. --> </div>

Now, when asp.net evaluates this image path, it will always starts from the root directory ( because we used the telda sign ~) and get's to the Images folder,then looks for an image which called MyBackground.jpg. this fixed the problem right?
Now wherever you put this usercontrol, it should run correctly.

for any thing which still not clear, am always here, thanks
Mohammed El-Sayed
Software Engineer