CSS background: url, no work when the url have brackets

Question

I have the next url for an image

url: http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg

Now, i wont make in my CSS

background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg)

the problem is the brackets in the url.

i try scape the bracket, but not work.

Any ideas?

I use Rails and SCSS

Thank

Answer 1

Here you go: Put \ in-front of the brackets.

HTML:

<div></div>

CSS:

div {
    background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-\(1\)-340x340.jpg);
    width: 400px;
    height: 400px;
}

DEMO HERE

Answer 2

Replace braces with encoded braces chars:

div {
    background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-%281%29-340x340.jpg);
    width: 400px;
    height: 400px;
}