I don’t understand what’s wrong with this? I’m watching a tutorial and it seems to work fine on the video but both mozilla and chrome ignore this code and marks it as an invalid property value.
.btn {
background-color: #4FB69F url("img/texture.png") no-repeat right top;
}
asked Apr 27, 2013 at 4:20
1
change
background-color:
to
background:
Because background is a shorthand property for
- background-color
- background-image
- background-position
- background-repeat
- background-attachment
answered Apr 27, 2013 at 4:22
Dipesh ParmarDipesh Parmar
27k8 gold badges60 silver badges90 bronze badges
2
If you are using inverted commas in your CSS, please remove them from your CSS file.
For example, find difference between each CSS rule set for .row:
.row {
margin-left:'-16px !important';
margin-right:'0px !important';
}
.row {
margin-left:-16px !important;
margin-right:0px !important;
}
BSMP
4,5588 gold badges33 silver badges44 bronze badges
answered Oct 14, 2020 at 10:06
Ayush BangaAyush Banga
2694 silver badges4 bronze badges
1
Not directly a solution but a typo in CSS property value caused similar issue for me:
.PokeCard {
border: 2px solic mediumseagreen;
}
The problem was a typo solic instead of solid.
answered Dec 16, 2019 at 15:46
Illegal ArgumentIllegal Argument
10.1k2 gold badges43 silver badges60 bronze badges
I had similar problem .
I tried to apply background but there was a typo.
what i tried in CSS
body{
background:"#cebbc9"
}and I got this error
simply remove the double quotes from the value. as the hex value in css is not in double quotes.
body{
background:#cebbc9
}answered Jan 20, 2021 at 12:44
1
background-color: #4FB69F;
background-image: url('images/texture.png');
background-repeat: no-repeat;
background-position: right top;
Within the image url requires ‘ not «
Background position is separate from no repeat
and ; between each element control
Sparrow
2,5381 gold badge24 silver badges28 bronze badges
answered Dec 25, 2016 at 20:26
Instead of writing:
.btn {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property background:
.btn {
background: #ffffff url("img_tree.png") no-repeat right top;
}
It does not matter if one of the property values is missing, as long as the other ones are in this order.
know more
answered Jun 15, 2021 at 7:47
.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…
Hamed
1,1653 gold badges20 silver badges45 bronze badges
asked Jan 17, 2013 at 11:48
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, 2013 at 11:50
Tom WaltersTom Walters
15.2k7 gold badges56 silver badges74 bronze badges
4
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.
answered Jun 13, 2015 at 12:35
MichaelMichael
6115 silver badges17 bronze badges
0
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;
answered May 25, 2020 at 11:21
porcupineporcupine
1212 silver badges3 bronze badges
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, 2020 at 18:43
2
Just delete ../ and use it as
background: url(img/showcase.jpg) no-repeat top center;
NearHuscarl
63k16 gold badges248 silver badges222 bronze badges
answered Oct 6, 2020 at 18:20
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
answered Mar 15 at 13:42
RubioRicRubioRic
2,4464 gold badges27 silver badges35 bronze badges
|
ryana
http://ksaverk.ru Сообщений: 7 |
wordpress, пытаюсь вставить в хэдэр картинку, выдаёт ошибку invalid property value уже повставляла во все дивы, картинка (адрес проверяла, работает) не появляется, только цвет можно в бекграунде сделать. |
||
|
|
Mari
Пол: |
ryana, в Опере картинка вставляется. |
||
|
|
ryana
http://ksaverk.ru Сообщений: 7 |
спасибо, ширину и высоту пока не делала. Значит, проблема в браузерах — модзилле и хроме. Неужели они что-то в коде не читают? вроде совсем простой css |
||
|
|
ryana
http://ksaverk.ru Сообщений: 7 |
Спасибо, но с этого и начинала. не помогает. background: #600 url(img/bg.png) |
||
|
В общем все написано правильно вроде как, но не отрабатывает, а через tool возле заданного стиля animation желтый треугольник и надпись invalid property value. как это можно исправить
КОД:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="wave">
<div class="wave__one"></div>
<div class="wave__two"></div>
</div>
</body>
</html>CSS:
body{
padding:0;
margin:0;
background-color: #555;
}
.wave{
width:100%;
overflow: hidden;
position:relative;
}
.wave__one {
background:url("img/wave/wave_top.png") repeat-x;
width:7000px;
height: 218px;
animation: waves 15s infinite lianer;
position:absolute;
top:0;
}
.wave__two {
background:url("img/wave/wave_top_opacity.png") repeat-x;
width:7000px;
height: 218px;
animation: waves 10s infinite lianer;
position:relative;
top:0;
}
@keyframes waves {
0% {
margin-left: 0;
}
100% {
margin-left: -1938px;
}
}|
KoRNeT46RuS 1 / 1 / 1 Регистрация: 07.03.2012 Сообщений: 78 |
||||
|
1 |
||||
|
11.10.2014, 17:15. Показов 54827. Ответов 3 Метки нет (Все метки)
Такая борода (скрин вложил).
Попрошу без шуток. Я начинающий. В чем проблема? Почему не отображается? Миниатюры
0 |
|
3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170 |
|
|
11.10.2014, 18:12 |
2 |
|
Почему не отображается? По иерархии есть стили, которые перекрывают css-правило «background» для «.head-contact». Смотрите там же в инспекторе, где еще определяется это свойство.
0 |
|
KoRNeT46RuS 1 / 1 / 1 Регистрация: 07.03.2012 Сообщений: 78 |
||||
|
11.10.2014, 19:58 [ТС] |
3 |
|||
|
По иерархии есть стили, которые перекрывают css-правило «background» для «.head-contact». Смотрите там же в инспекторе, где еще определяется это свойство.
Вот весь код. Я найти конфликт не могу
0 |
|
3322 / 2842 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170 |
|
|
11.10.2014, 20:24 |
4 |
|
Решение
Я найти конфликт не могу Мде… Можно было бы долго искать. У вас HEX-код цвета (#f8farb) не корректный. Таблица «безопасных» цветов
2 |
Сообщение было отмечено KoRNeT46RuS как решение