2 Values in the background-size property-CodePudding

Was testing different ways of fitting a background using CSS, and read some documentation that I did not 100% understand.

Currently I have the following:

body {
    background: linear-gradient(-45deg,#ee7252,#a23d73,#2be6d5,#24d5ab);
    background-size: 250% 250%;
}

My question is the following: What is the difference between

background-size: 250%;

and

background-size: 250% 250%;

CodePudding user response：

Based on the documentation

The background-size property takes one or two values. If it has two then the first specifies the size of the background in the x direction and the second the size in the y direction.

In your example the width at 250% means the background is 'stretched' to two and a half times the width of the element. And similarly with height.

If no height is specified then 'auto' is assumed and the background will get the height of the element - no 'stretching'.