How to escape quotes in inline styles?

Question

If I have an inline stylesheet, can and I want - for some strange reason - use the same quotes that u used to encapsulate the attribute value in my html code inside the css.

Is one of these correct?

<div style="background: url(\"http://my-url.com/img.jpg\")"></div>


<div style="background: url(&quot;http://my-url.com/img.jpg&quot;)"></div>

I think the first one is correct and the second one is nonsense. Am I right or not, and why?

edit:

A co worker wrote it the second way, and the problem was that some browsers (included but not necessarily limited to internet explorer 6+7+8) requested the url INCLUDING the " signs which resultet in an 404 request.

edit 2:

okay now its really getting weird. this is the original code copy and pasted from our file.

<div class="cover" style="background-image: url(&quot;http://www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F7780E.jpg&quot;);">

and this is straight from our error log:

13:09:45 (0.2424) [header] requ_uri        /schauspieler/Kelly+Trump/"http:/www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F6TYO8.jpg"
Mar 18 13:09:45 (0.0001) [header] server_addr     10.48.195.172
Mar 18 13:09:45 (0.0001) [header] http_user_agent Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; eSobiSubscriber 2.0.4.16; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; AskTbFF/5.9.1.14019)
Mar 18 13:09:45 (0.0001) [error] 404-Seite wurde aufgerufen
Mar 18 13:09:45 (0.0386) [header] remote_ip       212.95.7.69 - AT
Mar 18 13:09:45 (0.0001) [header] visitor_id      4095543, -
Mar 18 13:09:45 (0.0001) [header] requ_url        http://www.flimmit.com/schauspieler/Kelly+Trump/"http:/www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F6TYO8.jpg"
Mar 18 13:09:45 (0.0001) [header] http_referer    http://www.flimmit.com/schauspieler/Kelly+Trump/
Mar 18 13:09:45 (0.0000) [header] finished at 0.2816

this was an IE8 client. on IE6 the request uri even has " instead of " in it.

So either we are all wrong or internet explorer is not respecting any standards?

There is a reason why both types of quotes are used in HTML. Is your strange reason simply asking a strange question on SO? — Oded, Mar 18 '11 at 13:53
@Shaz - It's a strange requirement. I am wondering if the question is contrived. — Oded, Mar 18 '11 at 13:56
I honestly don't understand what you are trying to achieve here? — , Mar 18 '11 at 13:57
nothing, its just a css my co worker generated and we argued about it and this question was left unclear :D — The Surrican, Mar 18 '11 at 14:10
from all the answers it looksl ike second way is correct, but internet explorer doesnt interpret it correctly... whos fault? — The Surrican, Mar 18 '11 at 14:15

Luke Duddridge · Accepted Answer · 2011-03-18T13:58:33.160

30

use single quotes and I think it should be round brackets:

<div style="background: url('http://my-url.com/img.jpg')"></div>

The " works too (tested in jsFiddle):

<div style="background: url(&quot;http://my-url.com/img.jpg&quot;)">test</div>

edited Mar 18 '11 at 13:58

answered Mar 18 '11 at 13:53

Luke Duddridge

4,285
35
50

He says he specifically wants to use the same quotes. – Oded Mar 18 '11 at 13:54
sorry the brackets were my mistake. but the weird thing is that internet explorer erquests the url INCLUDING ", which resulst in an 404 on our server... – The Surrican Mar 18 '11 at 14:16
@Luke Duddridge i added the raw code and error message to the answer. unfortunately i cannot test it because i have no windows system anywhere near me... – The Surrican Mar 18 '11 at 14:46
@Joe as a few have said the quot isnt always necessary, do you get the same issue without them? – Luke Duddridge Mar 21 '11 at 09:35
no, this solves the problem. we now have single quote. its no problem to change. i just wonder why the problem happened in the first place because its all standard and conform... – The Surrican Mar 21 '11 at 23:56
@joe: just looking at the error message you added. To me it looks like it is pre-pending some other bits, so that the url is: `/schauspieler/Kelly+Trump/"http:/www.flimmit.com/media/search/filmcovers/105x152/ka/false/kf/false/F6TYO8.jpg"`. It looks like the url string gets built incorrectly. (also it only shows 1 forward slash after the http:, not sure if this is an error of the encoding) – Luke Duddridge Mar 22 '11 at 10:16

score 5 · Answer 2 · edited May 18 '23 at 01:42

5

The second option is the correct one, as far as escaping is concerned:

<div style="background: url(&quot;https://my-url.com/img.jpg&quot;)"></div>

To escape double-quotes in HTML you use ", whether in attributes or not.

See this jsfiddle (taken from this SO answer).

edited May 18 '23 at 01:42

Mifield

18
5

answered Mar 18 '11 at 13:56

Oded

489,969
99
883
1,009

+1 Escaping special characters as entities is always the way to go. They are expanded everywhere in HTML/XML documents and are the designated workaround for syntactically-meaningful characters. Otherwise, you'll eventually just run out of types of quotes to nest. – zneak Mar 18 '11 at 14:02
@Luke Duddridge Because the question is about `"`, not about `{}`. The omission seems like a minor, fixable omission to me. – zneak Mar 18 '11 at 14:06
@zneak - Might be, might not be. I'd rather not assume. – Oded Mar 18 '11 at 14:13
the weird thing is that internet explorer erquests the url INCLUDING ", which resulst in an 404 on our server... – The Surrican Mar 18 '11 at 14:16
@Joe - If you don't want the quotes to be passed though, don't encode them... Use single quotes to delimit the URL (or nothing at all, as they are not needed). – Oded Mar 18 '11 at 14:42

RDL · Answer 3 · 2011-03-18T14:17:49.250

5

First off, why?

You should be using () instead of '{}'

This way is best:

<div style="background: url('http://my-url.com/img.jpg')"></div>

This way is fine:

<div style="background: url(&quot;http://my-url.com/img.jpg&quot;)"></div>

This also works:

<div style="background: url(http://my-url.com/img.jpg)"></div>

This doesn't work:

<div style="background: url(\"http://my-url.com/img.jpg\")"></div>

Note: Remove the space after url.

edited Mar 18 '11 at 14:17

answered Mar 18 '11 at 13:56

RDL

7,865
3
29
32

Why remove the space after `url`? Does it break otherwise? – zneak Mar 18 '11 at 14:07
sorry the brackets were my mistake. but the weird thing is that internet explorer erquests the url INCLUDING ", which resulst in an 404 on our server... – The Surrican Mar 18 '11 at 14:14
@joe, hmm, I only tried it in Firefox. You know you don't have to use quotes at all for the url. see above - I added a new sample. – RDL Mar 18 '11 at 14:19
@Joe, are you missing a ';' by chance. It seems to work fine in IE7/8 for me. – RDL Mar 18 '11 at 14:22
@Joe, in your scenario is it possible to take the quotes out? – RDL Mar 18 '11 at 14:50

score 2 · Answer 4 · answered Apr 30 '21 at 04:31

If you want to use multiple double and single quotation

you can combine double and single quotation together (nested)

style="background-image: url( 'image.jpg' );"

or

style='background-image: url( "image.jpg" );'

and available to be more nested

like (if you're using template for framework (Django))

 style="background-image: url( ' {% static "image.jpg"   %}' ); "

How to escape quotes in inline styles?

4 Answers4