Relative path in MasterPage in virtual directory.

Question

I have a table that looks like this in a usercontrol. Then the usercontrol is used on the masterpage.

<table>
  <tr> 
    <td width="80%" style="background-image: url(/images/Header_right.gif); background-repeat: repeat-x;">
    </td>
  </tr>
</table>

If the aspx page is in the root directory of the site it works. But if the aspx page is a level deeper the path is no longer valid. (Default.aspx VS /Projects/Default.aspx)

Is there another way to get the image to repeat like the above table cell? Fixing the path would be great but my goal is to have the image take up the rest of the browser screen.

NOTE: This problem appeared after moving the site into a virtual directory.

Answer 1

Use a Style Sheet

The best way is to use a style sheet rather than an embedded style. Then you don't have to worry about the relative path from the control as the path will be relative to the style sheet.

ResolveClientUrl()

If for some reason you can't use a style sheet, you can resolve the url relative to the application root with a tilda (~). ASP.Net controls can resolve this automatically, but in this case you will need to call ResolveClientUrl() yourself.

<table>
  <tr> 
    <td width="80%" style="background-image: url(<%= ResolveClientUrl(”~/images/Header_right.gif”) %>); background-repeat: repeat-x;">
    </td>
  </tr>
</table>

But really, the best way is to use a style sheet.

Answer 2

Use css class for styling. All classes put to separate css file and reference it in the master page file. Then path to images all always relative to location of css, and you don't have a problem with locations of aspx page!

Answer 3

Define a class in your CSS file that references the image relative to the CSS file. Apply that class to the particular element you want to style with that class. This will help keep the paths correct.

Note this assumes that your CSS file is in the same directory tree as the images, but in a sibling directory.

CSS

.header-bg
{
   background-image: url(../images/Header_right.gif);
   background-repeat: repeat-x;
}

Mark up

<link rel="stylesheet"
      type="text/css"
      href="~/Content/styles/site.css"
      ID="siteCss"
      runat="server" />

<table>
    <tr>
        <td width="80%" class="header-bg"></td>
    </tr>
</table>