Day63 - [css]background

이번에는 css의 background 에 대해서 알아 봅시다.

 

background

background 는 뒷 배경 이라고 생각을 하시면 되겠습니다.

 

background-color -> 뒷 배경에 색 넣기

background-image -> 뒷 배경에 이미지 넣기

※ border : 1px solid #777; 을 적용하고 있습니다.

 

background-repeat -> 이미지 반복 여부

repeat : 반복 ( 기본값 )

no repeat : 반복x

repeat-x : x축 반복

repeat-y : y축 반복

 

background-position -> 뒷배경 시작위치 ( 왼쪽, 위 )

%를 사용해서 위치를 지정할 수도 있습니다.

 

background-size -> 뒷배경 사이즈 조절

auto : 이미지의 원래 사이즈 ( 기본값 )

contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.

cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.

background-attachment -> 뒷배경 움직임 설정

 

scroll : 화면을 움직일 때, 뒷배경도 같이 움직임 ( 기본값 )

fixed : 화면을 움직여도, 뒷배경은 가많이 있음 ( 뒷배경은 가만히 있는데, 상대적으로 화면이 움직여서 뒷배경이 움직이는 것처럼 보임 )