CODEWITHSUNDEEP
css
Baahubali
Baahubali

Reputation: 4802

Linear Gradient Background Image - CSS Not working

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:

enter image description here

Upvotes: 3

Views: 618

Answers (2)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

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:

enter image description here

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>

Upvotes: 2

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5326

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>

Upvotes: 4

Related Questions