CSS无效的属性值？

Question

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

Answer 1

change

background-color:

to

background:

Because background is a shorthand property for

• background-color
• background-image
• background-position
• background-repeat
• background-attachment

Answer 2

Another possible cause could be that you have a "Hidden Character" in the css property or value.

To fix that, copy the code directly from you IDE to some "Hidden Character" detector like this one https://www.soscisurvey.de/tools/view-chars.php ,delete the 'bad' characters and then save your code again without the bad characters.

Bonus: If you are using a JetBrains ide like WebStorm, this plugin can help you https://plugins.jetbrains.com/plugin/7448-zero-width-characters-locator

Answer 3

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 .

Answer 4

If you are using inverted commas in your css. 
Please remove inverted commas from  your css file.

For Example,
Please find below css and find difference between both css
.row{
     margin-left:'-16px !important';
    margin-right:'0px !important';
}

.row{
    margin-left:-16px !important;
    margin-right:0px !important;
}

Answer 5

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

Answer 6

I had similar problem .

I tried to apply background but there was a typo.

what i tried to in CSS

and I got this error

simply remove the double quotes from the value. as the hex value in css is not in double quotes.

Answer 7

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