Error: CSS: background: / is an incorrect operator
If we refer to the formal syntax:
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: https://developer.mozilla.org/en-US/docs/Web/CSS/background
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)
*{
padding: 0;
margin: 0;
}
.container{
width: 800px;
height: 800px;
margin: 0 auto;
border: solid 2px;
background: red url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/2244px-Wikipedia-logo-v2.svg.png") 0 0 no-repeat fixed;
}
<div class="container">
</div>
CSS background shorthand, can't include size
From MDN:
The value may only be included immediately after ,
separated with the '/' character, like this: "center/80%".
To clarify: The solution is to write background: none center/contain no-repeat
, instead of separating them with spaces.
Related Topics
How to Get Ff 33.X Flexbox Behavior in Ff 34.X
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters
Css Scrollbar Style Cross Browser
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
Semi-Transparent Color Layer Over Background-Image
How to Write a ':Hover' Condition For 'A:Before' and 'A:After'
Why Do the :Before and :After Pseudo-Elements Require a 'Content' Property
Does Firefox Support Position: Relative on Table Elements
Difference Among Col-Lg-*, Col-Md-* and Col-Sm-* in Bootstrap
Css Triangle Custom Border Color
Center an Element in Bootstrap Navbar
Child Inside Parent With Min-Height: 100% Not Inheriting Height
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used