Linear Gradient Background Image - CSS Not working-CodePudding

This is my styles.css which contains:

.ui.inverted.top.fixed.menu {
    background-image:linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%);
    background-image: -webkit-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%);
    background-image: -moz-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ;
    background-image: -ms-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ;
    background-image: -o-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ;
    background-image: repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ; 
}

The reason it has so many versions is because I want to show I have tried all possibilities in all the browsers and can't figure out why it's not working. The browser developer shows me it as an invalid property value.

This is what my HTML DOM looks like where I am trying to apply this:

CodePudding user response：

There're a space between rgb and start parentheses ( in every background-image property.

You need Remove theses spaces:

Before: rgb (
After: rgb(

Example:

.ui.inverted.top.fixed.menu {
  height: 426px;
  background: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -webkit-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -moz-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -ms-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -o-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
}

<div id="root">
  <div >
    <div ></div>
  </div>
</div>

CodePudding user response：

It works for me fine. only I deleted a space between rgb and ( in the first background-image:

.ui.inverted.top.fixed.menu {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -webkit-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -moz-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -ms-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -o-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
}

<div >
</div>

Edit:

also, I realized there is this space in other lines. But when I remove spaces, makes a color dark blue at the end of linear-gradient. seem it is for a repeating prefix in other cases of background images:

do you want that? I do not think. So I remove those(-repeating). Now how it is?

.ui.inverted.top.fixed.menu {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -webkit-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -moz-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -ms-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background-image: -o-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
}

<div >
</div>

But changes the direction of linear-gradient. It fixes If remove other background images:

.ui.inverted.top.fixed.menu {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
}

<div >
</div>