Lazy loading background image not working when image name includes character ( )!

Questions
1

I used lasy loading in version 3 and it worked great, but now when changed to version 5 it is no longer working!?

And I finally understand why! If my image name include the characters () then it is not working.
This image is working house.jpg but house(1).jpg is not working.
This worked in version 3 but not now in version 5.
But how can I fix it?

Im using divs for background images.
<div data-background="https://domain.se/admin/user_images/images/produkt/bok(1).jpg" class="moreimage lazy lazy-fade-in"></div>

It adds the class lazy-loaded to the div as it should but it is not displaying the image!

<div class="moreimage lazy-fade-in lazy-loaded"></div>

So why isn´t it working if the image name includes the characters () like house(1).jpg

If I use an img tag with lazy class, then it works, but not when using it on a background div.

Thanks!

2

( and ) are invalid characters in CSS (which is, where your background-image is defined):

https://www.w3.org/TR/CSS21/syndata.html#characters

1 Like
3

Ok thanks tiptronic, I didn´t know that. I guess I just have to fix the filenames when I upload them instead and remove the () characters.

4

In this case your images become background-image: url(house(1).jpg) which is i guess not parseable by browser