relative URL path question

Question

Why does this work in design mode but not when I run it:

<tr style="background-image: url('~/images/button.gif');">

...and this works in both design and run time mode?

<tr style="background-image: url('images/button.gif');">

The images folder is one folder below the aspx page which contains this HTML.

Answer 1

At run time, the style value gets to the browser with the tilde, and the client does not know anything about it. You should do something like this:

<tr style="background-image: url(<%= ResolveUrl ('~/images/button.gif') %>">

Answer 2

The relative path is only known on the server. Putting it in the source (either HTML or, in this case, CSS), tells the client's browser to make a separate request for that file at the specified url. The '~' won't mean anything to the client's computer, so the request won't be made to the correct url.