Invalid Property Value on background-image

Question

.up { background-image: url(\'/design-library/profound_test/images/cab_images/white-arrow-up.png\') 50% 50% no-repeat; }

This code is giving me an

Answer 1

Even if you do everything described above, you may get an "invalid property value" in Firefox. The workaround is to convert:

background: url(../img/showcase.jpg) no-repeat top center fixed/cover;

into:

background: url(../img/showcase.jpg) no-repeat top center;
background-attachment: fixed;
background-size: cover cover;

Answer 2

Just delete ../ and use it as

background: url(img/showcase.jpg) no-repeat top center;

Answer 3

This error also occurs in Chrome when you don't use apostrophes and your file has spaces. Simply change:

background-image: url(../img/file with spaces.png);

to:

background-image: url('../img/file with spaces.png');

Answer 4

Yep because the background-image property is for the image part only, not the position or repeat properties of the background, use background:

.up { 
    background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; 
}

Answer 5

Chrome* will also throw this warning (and doesn't display the bg image), if you have a blank space between url and ( like:

background-image: url ('img/web-bg.png');
                     ^

(Which was the reason for me to search and find this question but no answer and then doing trial and error.)

• ... maybe depending on the Chrome version, I assume.