Invalid Property Value on background-image

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.)

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');

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; 
}

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;

Related