'Invalid Property Value on background-image

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

cssgoogle-chromesafari


Solution 1:[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; 
}

Solution 2:[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.

Solution 3:[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;

Solution 4:[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');

Solution 5:[5]

Just delete ../ and use it as

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tom Walters
Solution 2 Michael
Solution 3 porcupine
Solution 4 aidangoodman7
Solution 5 NearHuscarl

Related Questions