Question

Okay so I have a simple HTML Input fragment:

<input id="txtFirstName" type="text" class="txtBox" runat="server" />

Which is hooked up to this CSS property:

.txtBox
{

    background: url("/Images/lu/input_bg.png") repeat-x scroll left bottom transparent;
    border: 1px solid #E0E6EF;
    padding: 3px;
    width: 275px;

}

The image shows up in Visual Studios design window, but not when I view it in a browser. What gives?

Answer 1

Often, when you develop locally, Visual Studio will host the site at http://localhost:port – this is the default when using the inbuilt web server for web application and web site projects.

When you deploy to your remote site, it may be in a virtual directory that is not the root site; so, in fact, your remote application URL will be something like http://yourdomain.ext/your_site/ which changes the paths for images. The solution is to either include the virtual directory name in your path (/your_site/images/image.jpg) or use relative paths.

I prefer the former as it keeps all paths consistent, and it is possible to simulate this locally in Visual Studio.

For Web Application Projects see Solution Properties (Right click the solution node in the Solution Explorer and choose properties) – Web (tab on the left) – and look for the Virtual Path text box and change as appropriate (e.g. from ‘/’ to ‘/your_site’)

For Web Site Projects, click the Solution node in the Solution Explorer and look at the Properties dialog. The last option is a Virtual Path.