Why background-size doesnt work with only a button?

I simply have this

button {
  border: none;
  padding: 0.5rem 1rem;
  scale: 2;
  border-radius: 900px;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  background: red;
  background-image: linear-gradient(red, blue, green, pink);
  background-size: 900%;
}

button {
  border: none;
  padding: 0.5rem 1rem;
  scale: 2;
  border-radius: 900px;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  background: red;
  background-image: linear-gradient(red, blue, green, pink);
  background-size: 900%;
}

But the background-size doesnt wrok and I dont see what's wrong, the browser doesnt complain about anything. I only have this code, I tried it in a code pen and it didnt work

7 Replies

ἔρως•3mo ago

it does but the background is repeating

ἔρως•3mo ago

ἔρως•3mo ago

https://jsfiddle.net/wqs0d16x/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

lko•3mo ago

You're right, I expected it to go vertically Can I do that?

ἔρως•3mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size <-- the background size accepts 1 or 2 values so, you can give it a width and a height, separated by a space

lko•3mo ago

Thanks

ἔρως•3mo ago

you're welcome

Gaming

Programming

Why background-size doesnt work with only a button?