Меню

Invalid property value css ошибка background

.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's user avatar

Hamed

1,1553 gold badges20 silver badges45 bronze badges

asked Jan 17, 2013 at 11:48

Mike Earley's user avatar

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 Walters's user avatar

Tom WaltersTom Walters

15k7 gold badges58 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

Michael's user avatar

MichaelMichael

6015 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

porcupine's user avatar

porcupineporcupine

1011 silver badge3 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

aidangoodman7's user avatar

2

Just delete ../ and use it as

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

NearHuscarl's user avatar

NearHuscarl

55.9k13 gold badges218 silver badges197 bronze badges

answered Oct 6, 2020 at 18:20

user14402845's user avatar

Источник
ryana

http://ksaverk.ru
Offline Offline

Сообщений: 7

Просмотр профиля
WWW

wordpress,
сайт http://нп-цспб

пытаюсь вставить в хэдэр картинку, выдаёт ошибку     invalid property value

уже повставляла во все дивы, картинка (адрес проверяла, работает) не появляется, только цвет можно в бекграунде сделать.
адрес картинки:
http://нп-цспб.рф/wp-content/themes/redpepper/img/Fireman.jpg

Записан
Mari

Offline Offline

Пол: Женский
Сообщений: 86

Просмотр профиля

ryana, в Опере картинка вставляется.
style.css: 53
#header
background: url(«http://нп-цспб.рф/wp-content/themes/redpepper/img/Fireman.jpg») no-repeat transparent;
Единственное, у Вас ширина картинки 700, а хэдэр width: 780px и высота не прописана.

Записан
ryana

http://ksaverk.ru
Offline Offline

Сообщений: 7

Просмотр профиля
WWW

спасибо, ширину и высоту пока не делала. Значит, проблема в браузерах — модзилле и хроме. Неужели они что-то в коде не читают? вроде совсем простой css

Записан
ryana

http://ksaverk.ru
Offline Offline

Сообщений: 7

Просмотр профиля
WWW

Спасибо, но с этого и начинала. не помогает.
в остальном сайте работают отлично записи типа

background: #600 url(img/bg.png)

Записан
Источник

KoRNeT46RuS

1 / 1 / 1

Регистрация: 07.03.2012

Сообщений: 78

1

11.10.2014, 17:15. Показов 52986. Ответов 3

Метки нет (Все метки)

Такая борода (скрин вложил).

CSS 
1
2
3
4
5
6
7
8
9

.head-contact{
    float: right;
    background: #f8farb url('images/phone-image.jpg') right top no-repeat;
    border: 2px solid #edf2f6;
    border-radius: 0 0 10px 10px;
    text-align: right;
    margin: 0 6px 0 0;
    padding:  5px 10px;
}

Попрошу без шуток. Я начинающий. В чем проблема? Почему не отображается?

Миниатюры

Invalid property value
 

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь



0

3322 / 2842 / 1423

Регистрация: 15.01.2014

Сообщений: 6,170

11.10.2014, 18:12

2

Цитата
Сообщение от KoRNeT46RuS
Посмотреть сообщение

Почему не отображается?

По иерархии есть стили, которые перекрывают css-правило «background» для «.head-contact». Смотрите там же в инспекторе, где еще определяется это свойство.



0

KoRNeT46RuS

1 / 1 / 1

Регистрация: 07.03.2012

Сообщений: 78

11.10.2014, 19:58

 [ТС]

3

Цитата
Сообщение от Lazy_Den
Посмотреть сообщение

По иерархии есть стили, которые перекрывают css-правило «background» для «.head-contact». Смотрите там же в инспекторе, где еще определяется это свойство.

CSS 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

*{
    margin: 0;
    padding: 0;
}
img{
    border: none;
}
body{
    background: #f2f2f2;
}
.main{
    background: #fff;
    min-width: 980px;
    max-width: 1200px;
    margin: 0 auto;
}
    /*Шапка сайта*/
    .header{
        overflow: hidden;
    }
    .logo, slogan{
        float: left;
    }
    .logo{
        margin: 8px 0 0 30px;
    }
    .slogan{
        margin: 40px 0 30px 30px;
    }
    .head-contact{
        float: right;
        background: #f8farb url('images/phone-image.jpg') 250px 8px no-repeat;
        border: 2px solid #edf2f6;
        border-radius: 0 0 10px 10px;
        text-align: right;
        margin: 0 6px 0 0;
        padding:  5px 65px 5px 15px;
    }

Вот весь код. Я найти конфликт не могу



0

3322 / 2842 / 1423

Регистрация: 15.01.2014

Сообщений: 6,170

11.10.2014, 20:24

4

Лучший ответ Сообщение было отмечено KoRNeT46RuS как решение

Решение

Цитата
Сообщение от KoRNeT46RuS
Посмотреть сообщение

Я найти конфликт не могу

Мде… Можно было бы долго искать. У вас HEX-код цвета (#f8farb) не корректный. Таблица «безопасных» цветов



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.

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;

Tags:

Css

Safari

Google Chrome

Related

Источник
.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…

6 Answers

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

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.

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;

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

Just delete ../ and use it as

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

Your file name must contain no white spaces.

Источник
.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's user avatar

Hamed

1,1553 gold badges20 silver badges45 bronze badges

asked Jan 17, 2013 at 11:48

Mike Earley's user avatar

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 Walters's user avatar

Tom WaltersTom Walters

15k7 gold badges58 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

Michael's user avatar

MichaelMichael

6015 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

porcupine's user avatar

porcupineporcupine

1011 silver badge3 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

aidangoodman7's user avatar

2

Just delete ../ and use it as

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

NearHuscarl's user avatar

NearHuscarl

55.9k13 gold badges218 silver badges197 bronze badges

answered Oct 6, 2020 at 18:20

user14402845's user avatar

Источник
.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's user avatar

Hamed

1,1553 gold badges20 silver badges45 bronze badges

asked Jan 17, 2013 at 11:48

Mike Earley's user avatar

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 Walters's user avatar

Tom WaltersTom Walters

15k7 gold badges58 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

Michael's user avatar

MichaelMichael

6015 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

porcupine's user avatar

porcupineporcupine

1011 silver badge3 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

aidangoodman7's user avatar

2

Just delete ../ and use it as

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

NearHuscarl's user avatar

NearHuscarl

55.9k13 gold badges218 silver badges197 bronze badges

answered Oct 6, 2020 at 18:20

user14402845's user avatar

Источник

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

А вот еще интересные материалы:

  • Яшка сломя голову остановился исправьте ошибки
  • Ясность цели позволяет целеустремленно добиваться намеченного исправьте ошибки
  • Ясность цели позволяет целеустремленно добиваться намеченного где ошибка
  • Invalid procedure call or argument vba ошибка
  • Invalid outside procedure ошибка

    • ➤