Linear Gradient Background Image - CSS Not working

Question

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:

both the answers below are correct. how do i know who answered it first? it says the same time for me. — Baahubali
– Baahubali, Commented Mar 1, 2022 at 12:36
Rafael's answer did some seconds early. So accept his answer. — Arman Ebrahimi
– Arman Ebrahimi, Commented Mar 1, 2022 at 12:41
@Baahubali -- for future reference, if you hover the answered time (where it says "answered yesterday", or "answered an hour ago") with your cursor, eventually you will get a tooltip showing the exact timestamp of when they answered. Good luck, and happy coding! — Alexander Nied
– Alexander Nied, Commented Mar 1, 2022 at 14:20

ℛɑƒæĿᴿᴹᴿ · Accepted Answer · 2022-02-28 14:16:00Z

4

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 class="ui inverted top fixed menu">
    <div class="ui container"></div>
  </div>
</div>

edited Feb 28, 2022 at 14:16

answered Feb 28, 2022 at 14:10

ℛɑƒæĿᴿᴹᴿ

5,4765 gold badges42 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arman Ebrahimi Over a year ago

It was interesting:)

Baahubali Over a year ago

i didn't know this space mattered :(.

Arman Ebrahimi · Accepted Answer · 2022-02-28 14:50:49Z

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 class="ui inverted top fixed menu">
</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 class="ui inverted top fixed menu">
</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 class="ui inverted top fixed menu">
</div>

Collectives™ on Stack Overflow

Linear Gradient Background Image - CSS Not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related