chapter 9-2
배경으로 이미지 파일을 저장하고 싶을 때, 아래의 여섯가지 속성을 이용할 수 있습니다.
background-image
background-image: url('이미지 파일 경로');만약 이미지 크기가 요소보다 크다면 왼쪽, 위쪽 끝 모서리를 기준으로 벗어나는 부분이 잘립니다. 이미지 크기가 요소보다 작다면, 이미지가 가로 세로로 바둑판 처럼 남는 부분을 채우면서 깔립니다.
background-repeat
이미지가 요소 보다 작을 때, 반복되는 방식을 지정합니다.
repeat: 가로 세로로 반복하며 깔립니다. 기본값입니다.
repeat-x: 가로로 요소의 너비를 채울 때 까지 반복합니다.
repeat-y: 세로로 요소의 높이를 채울 때 까지 반복합니다.
no-repeat: 반복하지 않고 그냥 한번만 표시합니다.
background-position
background-position: <수평 위치> <수직 위치>;수평 위치와 수직 위치는, 세가지 방법으로 지정할 수 있습니다.
키워드 수평 위치: left, center, right 수직 위치: top, center, bottom
만약 속성값을 하나만 지정한다면, 해당 값은 수평 위치로 간주됩니다. 수직 값은 50% 혹은 center로 설정됩니다.
백분율 해당 값이 x%라면? 배경 이미지의 수평, 혹은 수직 요소의 왼쪽, 위쪽으로부터 x%인 점을, 배경이 깔리는 요소의 수평, 혹은 수직 요소의 왼쪽, 위쪽으로부터 x%인 점에 맞춥니다.
크기 직접 px, 혹은 em 단위로 지정할 수 있습니다. background-origin에서 설정된 위치를 기준으로 가로, 세로로 얼마만큼 떨어져 있을지를 지정합니다.
background-origin
background-clip과 비슷하게, 배경 이미지의 적용 범위를 지정합니다.
border-box: 테두리 영역까지 적용됩니다. 기본값입니다.
padding-box: 패딩 영역까지 적용됩니다.
content-box: 컨텐츠 영역까지만 적용됩니다.
background-clip 역시 이미지의 적용 범위를 지정하는데 사용할 수 있습니다. 하지만, origin은 배경색의 범위를 지정하는데 쓸 수 없습니다.
background-attachment
스크롤을 내렸을 때 배경 이미지가 고정되어 있을지, 아니면 스크롤에 따라 움직일지를 지정합니다.
scroll: 화면을 스크롤 하면 이미지도 스크롤 될지를 지정합니다. 기본값입니다.
fixed: 화면을 스크롤해도 이미지가 고정되어 있습니다.
위의 다섯 가지 속성 + background-color 속성을, background라는 하나의 속성에 묶어서 사용할 수 있습니다.
background.: white url(’images/bg4.png’) no-repeat center bottom fixed;속성 값들이 모두 다르기 때문에, 순서는 딱히 상관없습니다. background-size는 적용되지 않습니다. 위의 속성 뒤에 contain을 추가해도 적용되지는 않습니다.
background-size
배경 이미지의 크기를 조절합니다.
auto: 원래 배경 이미지 만큼 표시합니다. 기본입니다.
contain: 이미지의 비율을 유지한 채로, 요소 안에 배경이미지가 꽉 차도록 확대/축소합니다. 비율이 맞지 않는 경우 요소 안에 공백을 남깁니다.
cover: 비율을 유지한 채로 요소를 모두 덮도록 배경 이미지를 확대/축소합니다. 비율이 맞지 않는 경우 요소를 모두 채울 때 까지 줄이거나 키우고, 벗어나는 부분은 잘립니다.
크기, 백분율 px, em등의 절대 크기나, 요소의 크기에 대한 백분율로 이미지의 사이즈를 지정합니다. 하나만 지정할 경우 너비로 인식하며 높이는 이미지 비율에 맞추어 자동 계산됩니다.
Last updated