배경색과 배경 이미지를 크기·위치·반복 규칙과 함께 설정합니다.
background-color는 바탕색, background-image는 이미지나 그라데이션을 지정합니다. background-size: cover는 영역을 덮고 contain은 이미지 전체가 보이게 합니다.
이번 예제의 출발점은 background: color image position / size repeat;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 그라데이션 각도와 background-color를 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
배경 이미지에 핵심 정보 텍스트를 넣으면 보조 기술과 이미지 실패 상황에서 내용을 잃습니다.
직접 바꿔보세요그라데이션 각도와 background-color를 바꿔보세요.