Error: Css: Background:/Is an Incorrect Operator

Error: CSS: background: / is an incorrect operator

If we refer to the formal syntax:

enter image description here

The / is the separation between background-position and background-size (this one being optional) so the correct syntax is:

 background: url(...) 100% 0/4% no-repeat;

Where background-position:100% 0 and background-size:4%

Note that background-size should always be specified with background-position when using shorthand syntax. You cannot specify the size without position but you can specify position without size:

 background: url(...) 100% 0 no-repeat;

Relatad question: Issues with "background-position" in "background" shorthand property

CSS: Value Error : background-image is an incorrect operator ) (validation fails)

it's related to the double color stops #ff5722 10% 15%. The validator seems to be not up to date with this new syntax. You can update your code and use:

.color {
background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10%, #ff5722 15%, #43a047 50%, #43a047 60%, #7e57c2 92%, indigo);
background-clip: content-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
p {
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);

Why background property is showing invalid?

The fixed/cover part is invalid, try the following:

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

the possible options for the background property can be found here:

CSS Background Shorthand property not work?

Two problems you have to fixed:

You doesn't have the "" for the url.

You have to separately set the background-size:cover property.

Set it in the background will not work.

*Not sure if image/computer.png is a local image or an invalid image. If it is a local image, just replace the url back (I change the url to wikipedia icon for showing purpose)

Leave a reply