CODEWITHSUNDEEP
htmlcss
Devsi Odedra
Devsi Odedra

Reputation: 5322

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

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>

Upvotes: 3

Views: 1765

Answers (4)

nikiforovpizza
nikiforovpizza

Reputation: 576

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

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

Upvotes: 1

fiveobjects
fiveobjects

Reputation: 4319

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>

Upvotes: 9

StepUp
StepUp

Reputation: 38199

Try to add single quotes into url:

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

Upvotes: 4

Javapocalypse
Javapocalypse

Reputation: 2363

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>

Upvotes: 5

Related Questions