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

score 60 · Accepted Answer · answered Jan 17 '13 at 11:50

60

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

answered Jan 17 '13 at 11:50

Tom Walters

15,366
7
57
74

I concur :-) you beat me to the post though! :-) – Nicholas King Jan 17 '13 at 11:51
No worries, just needed a fresh set of eyes obviously! – Tom Walters Jan 17 '13 at 12:28
That's what I get for getting up 2 hours early. – Mike Earley Jan 17 '13 at 12:28
@TomWalters still don't know I was also getting the same error as the above question then tried your solution but getting the same error for this one: ```background: url(../img/showcase.jpg) no-repeat top center fixed/cover;```. I am testing on Firefox. – Barefaced Bear Dec 28 '19 at 14:19

score 13 · Answer 2 · answered Jun 13 '15 at 12:35

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.

score 6 · Answer 3 · answered Oct 17 '20 at 18:43

6

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

answered Oct 17 '20 at 18:43

aidangoodman7

61
1
2

That's not an answer to this question, since here the file path is already single-quoted. – Hamed Oct 17 '20 at 19:53
Somehow, this is the only solution here that worked for me. – c.dasa Aug 27 '22 at 03:17

score 5 · Answer 4 · answered May 25 '20 at 11:21

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;

score 0 · Answer 5 · edited Oct 07 '20 at 07:19

0

Just delete ../ and use it as

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

edited Oct 07 '20 at 07:19

NearHuscarl

66,950
18
261
230

answered Oct 06 '20 at 18:20

user14402845

1

score 0 · Answer 6 · answered Mar 15 '23 at 13:42

We got the same problem in Chrome ("Invalid property value", image not rendered) because the file name contained parentheses

background: url(img/showcase(1).jpg)

Removing the parentheses just solved the problem. Just in case that you arrive here like me due to the question's title :-)

Chrome Version 111.0.5563.64

Invalid Property Value on background-image

6 Answers6

Linked