Single quote(') and double quote (") strange behavior in ASP.NET

Question

I have some questions regarding quotes usages. For example, when i load a script or css in asp double quotes work fine, i use it like:

 <link href="<%= Page.ResolveClientUrl("~/Styles/Site.css") %>" rel="stylesheet" type="text/css" />

But when i try to use the same same thing on a background-image it's not working as expected. Gives me an error:

The funtion arguments are unclosed, ')' expected

  background-image: url("<%= Page.ResolveClientUrl("~/Content/image.jpg")%>"); 

Also, when i try to use the code specified above, visual studio highlights the Page.ResolveClientUrl correctly.

I fixed the above error by using single quotes (`), like:

 background-image: url('<%= Page.ResolveClientUrl("~/Content/image.jpg")%>') 

It works fine, but visual studio doesn't highlight it as expected (I'm using the black background and the server tags <% %> are white on a yellow background and the text between the tags is white).

My questions are:

1. Why is it working with double quotes when loading scripts, but not when loading images within the background-image element.?

2. Why does visual studio highlight is as it's not server code?

3. What are other use cases where we should use single quotes instead of double quotes as in the above example?(except for string formatting as specified in the link below). One, two examples might be enough.

PS: I've read the difference between single and double quotes post (from here ) but this doesn't apply here.

Answer 1

First, but unrelated, the nav syntax is missing the style attribute.

Second, it really seems to be a problem with ASP.NET within style attributes. It works quite well as the full attribute value (as seen on the link tag). The : character may be the culprit.

What you can do:

First thing, there's no need to use Page.ResolveClientUrl with the link tag. You can use just the tilde path and ASP.NET will resolve the actual path.

From:

<link href="<%= Page.ResolveClientUrl("~/Styles/Site.css") %>" rel="stylesheet" type="text/css" />

To:

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

For the nav tag, try using a class and on the CSS side use a relative path:

HTML:

<nav class="nav-img" />

CSS:

.nav-img {
    background-image: url(../Content/image.jpg);
}