여러 배경 레이어와 크기·위치를 조합합니다.
background-image에는 쉼표로 여러 레이어를 쌓을 수 있으며 먼저 적은 이미지가 위에 옵니다. 각 레이어마다 position, size, repeat를 같은 순서로 지정합니다.
background-image의 첫 층인 radial-gradient가 .stage의 85% 20% 지점에 반지름 34px짜리 노란 원을 그리고, 그 아래층의 135deg 선형 그라데이션이 바탕 전체를 짙은 초록으로 채웁니다. 원 바깥은 transparent라 아래층이 그대로 비치며, 34px에서 35px로 넘어가는 1px 구간이 원 가장자리를 부드럽게 만듭니다. 원의 중심이 첫 흰 카드 안쪽에 있어 카드 위 여백으로 원의 윗부분만 살짝 드러납니다.
background-size나 background-position에 적은 값의 개수가 레이어보다 적으면 목록을 처음부터 반복해 나머지 레이어에 짝지웁니다. 반대로 값이 더 많으면 남는 값은 쓰이지 않으므로, 층을 지울 때는 짝이 되는 값도 함께 지워야 순서가 어긋나지 않습니다.
복잡한 배경 위 텍스트는 대비가 일정하지 않을 수 있습니다.
직접 바꿔보세요두 배경 레이어의 순서를 바꿔보세요.