[HTML, CSS] - CSS 배경
CSS 배경
background
background 속성을 이용한 스타일을 한 줄에 설정
background-color
해당 HTML 요소의 배경색을 설정
background-image
해당 HTML 요소의 배경으로 나타날 배경 이미지를 설정
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타남
배경 이미지를 사용할 때에는 이미지가 본문의 텍스트를 방해하지 않도록 주의
하나의 요소에 여러 개의 배경 이미지를 설정 가능
각각의 배경 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 차례대로 쌓임
배경 이미지들 간의 순서는 가장 처음 명시된 이미지가 가장 위에 나타남
즉 가장 나중에 명시된 이미지가 가장 아래쪽에 위치
background-repeat
배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정
배경 이미지가 반복되지 않고 한 번만 나타나게 할 수 있음
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>
background-position
반복되지 않는 배경 이미지의 상대 위치 설정
퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시 가능
상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
background-attachment
위치가 설정된 배경 이미지를 해당 위치에 고정
고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않음
background-size
배경 이미지의 크기를 설정
CSS 크기 단위 사용 : 픽셀 단위(px), 배수 단위(em), 백분율 단위(%) 등
background-size: 너비 높이 contain|cover ;
속성값 contain
이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절
단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지 않음
-> 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같음
-> 배경 이미지가 요소의 일부분은 가리지 못할 수도 있음
속성값 cover
이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절
-> 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같음
-> 배경 이미지의 일부분이 잘릴 수도 있음
background-origin
배경 이미지의 위치를 결정할 기준을 설정
속성값 border-box
배경 이미지를 테두리(border) 영역의 왼쪽 위에 맞춤
속성값 padding-box
기본 설정
배경 이미지를 패딩(padding) 영역의 왼쪽 위에 맞춤
속성값 content-box
배경 이미지를 내용(content) 영역의 왼쪽 위에 맞춤
background-clip
해당 요소의 배경을 어느 영역까지 설정할지를 결정
속성값 border-box
기본 설정
배경을 테두리(border) 영역의 끝부분까지 설정
속성값 padding-box
배경을 패딩(padding) 영역의 끝부분까지 설정
속성값 content-box
배경을 내용(content) 영역까지만 설정
https://www.tcpschool.com/css/css3_module_backgrounds