A gradient has no intrinsic size, so background-size
still decides how big its tile is. Each bar below is 60px tall and carries the
same four-stop ramp: navy for the first half, white for the second.
background-size: 100% 200%; background-position: 0 0 → ALL NAVY, white text readable
background-size: 100% 200%; background-position: 0 100% → ALL WHITE, navy text readable
no background-size → navy top half, white bottom half (the text's descenders sit on white)
background-size: 200% 100% on a to-right ramp → ALL NAVY
Known gap: a tile SMALLER than the box on a repeating axis is
still stretched to the box rather than tiled, so
background-size: 100% 50% with the default
background-repeat: repeat renders as one full-height ramp instead
of two stacked ones.