2 Values in the background-size property

user_14227763 0
Viewed 42

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%;
css
2 Answers

You will notice that when you have background-size: 250% 250% the colors look lighter at the bottom right hand side than when you have just one 250%.

enter image description here

enter image description here

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'.

user_108674540

Based on the documentation here, specifying just one value implicitly sets the height to auto. Specifying two values (one for width, one for height) explicitly doesn't.

user_148197370
Related