relative URL path 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 f开发者_高级运维older below the aspx page which contains this HTML.

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') %>">

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.