박스모델 4편

background

콘텐츠의 배경을 정의한다.
단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

background-color : 배경 색을 정의한다.
background-image : 배경 이미지를 정의한다.
background-position : 배경 이미지의 초기 위치를 정의한다.
background-size : 배경 이미지의 크기를 정의한다.
background-repeat : 배경 이미지의 반복 방법을 정의한다.

background-position: left top;

이미지가 좌측 상단에 위치한다.

background-size: cover;

이미지가 찌그러지지 않는 한도 내에서 최대 크기로 지정된다.
``
background-size: contain;

이미지가 찌그러지거나 잘리지 않는 한도 내에서 최대 크기로 지정된다.

background-repeat: repeat;

이미지가 반복된다.

background-repeat: no-repeat;

이미지가 반복되지 않는다.

속성값들을 연달아서 지정할 수 있다. (순서 상관 X)

background : url(cloud.jpg) no-repeat center;

학습한 인프런 강의