css 속성3

들어가기 앞서,

• CSS 속성2에 이어서 배경과 관련된 속성에 대해 알아보겠다.

background-color

요소의 배경 색상

기본값: transparent, 투명함

background-image

요소의 배경 이미지 삽입

기본값: none

• none, 이미지 없음
• url("경로"), 이미지 경로

background-repeat

요소의 배경 이미지 반복

기본값: repeat

• repeat, 이미지를 수직, 수평 반복
• repeat-x, 이미지를 수평 반복
• repeat-y, 이미지를 수직 반복
• no-repeat, 반복 없음

background-position

요소의 배경 이미지 위치

• 방향: top, bottom, left, right, center
• 단위: px, em, rem 등

background-size

요소의 배경 이미지 크기

기본값: auto

• auto, 이미지의 실제 크기
• 단위, px, em, rem 등
• cover, 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain, 비율을 유지, 요소의 더 짧은 너비에 맞춤

cover

contain

background-attachment

요소의 배경 이미지 스크롤 특성

기본값: scroll

• scroll, 이미지가 요소를 따라서 같이 스크롤
• fixed, 이미지가 뷰포트에 고정, 스크롤 x