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 'invalid property value' in crome (and safari). I'm using the exact same code on another page, working correctly. I cleared my browser cache. If I remove 50% 50% no-repeat it works fine. Adding either of those 2 properties spikes it again to invalid (testing using developer tools).

I ran it through ProCSSor as well to clean it up, so I'm not sure where I'm screwing it up...

Answer 1

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 2

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.

Answer 3

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 4

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