Some images not working in `background-image:url()`

Question

Some images not working in background-image:url(), i cant figure out that does i need to remove ( and ) from image name or anything else is an issue?

any help will be appreciated.

here is an working and not working examples.

<!-- Not Working -->

<div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg)"> img </div>


<!-- Working -->

<div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div>

You can always encode parts of the URL: replace `(` by `%28` and `)` by `%29`. — Sebastian Simon, Aug 17 '19 at 09:26
@SebastianSimon thanks it is useful for be because `background-image:url()` generated dynamically from thirparty library. — Devsi Odedra, Aug 17 '19 at 09:30

fiveelements · Accepted Answer · 2019-08-17T09:30:00.057

Escape special characters (\ in front of ( and )) in the URL.

<!-- Use CSS escape character to escape special characters -->

<div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-\(1\).jpg)"> img </div>


<!-- Working -->

<div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div>

Alternatively, use single quote (') to enclose the image URL:

<!-- Use single quote (') to enclose image URL -->

<div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div>
<!-- Working-->

<div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1
</div>

score 5 · Answer 2 · answered Aug 17 '19 at 09:22

Just add single quotation marks around the url. If you have special characters in your URL, you should use quotes or escape the characters. Give this a read for further information.

Now Working

<div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div>


Working

<div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div>

score 4 · Answer 3 · answered Aug 17 '19 at 09:23

4

Try to add single quotes into url:

<div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div>

answered Aug 17 '19 at 09:23

StepUp

36,391
15
88
148

score 1 · Answer 4 · answered Sep 24 '21 at 12:47

1

In my case I had an issue with some urls containing a single quote. Fixed it surrounding the url with ":

<div style="background-image: url(&quot; ${url} &quot;);"></div>

answered Sep 24 '21 at 12:47

nikiforovpizza

487
1
7
13

Some images not working in `background-image:url()`

4 Answers4