CSS 속성(6) - 배경(background)

배경(background)

background-color는 요소의 배경 색상을 지정하는 속성입니다.

transparent란 기본값(투명함)이 들어 있으며,

색상으로도 지정할 수 있습니다.

 

background-image는 요소의 배경 이미지 삽입을 지정하는 속성입니다.

none란 기본값(이미지 없음)이 들어 있으며,

url("경로")로 이미지를 삽입할 수 있습니다.

 

background-color이 image 뒤에서 나타납니다.

 

배경 요소가 500px 크기로 되어 있으며, 배경 이미지는 200px이면,

배경 이미지는 바둑판식으로 반복되서 출력됩니다.

 

background-repeat는 요소의 배경 이미지 반복을 제어하는 속성입니다.

repeat란 기본값(이미지를 수직, 수평적으로 반복)이 들어 있으며,

repeat-x(이미지를 수평적으로 반복),

repeat-y(이미지를수직적으로 반복),

no-repeat(반복 없음) 값도 있습니다.

 

background-position는 요소의 배경 이미지 위치를 제어하는 속성입니다.

top, bottom, left, right, center 방향 값이 있습니다.

x축, y축으로 제어하고 싶으면 px, em, rem등 단위로도 지정할 수 있습니다.

또한 0% 0%(x축, y축)로도 지정할 수 있습니다.

0%~100% 사이의 숫자값을 입력합니다.

CSS 속성에서 x축은 왼쪽부터 오른쪽으로 가는 방향을 의미하며,

y축은 위에서 아래로 가는 방향을 의미합니다.참고해서 사용하시면 좋습니다.

 

background-size는 요소의 배경 이미지 크기를 지정하는 속성입니다.

aurto란 기본값(이미지의 실제 크기)이 들어 있으며,

px, em, rem등 단위로도 지정할 수 있습니다.

cover(비율을 유지하되, 요소의 더 넓은 너비에 맞춤),

contain(비율을 유지하되, 요소의 더 짧은 너비에 맞춤) 값도 있습니다.

 

background-attachment는 요소의 배경 이미지 스크롤 특성을 지정하는 속성입니다.

scroll란 기본값(이미지가 요소를 따라서 같이 스크롤)이 들어 있으며,

fixed(이미지가 뷰포트에 고정, 스크롤x),

local(요소 내 스크롤 시 이미지가 같이 스크롤) 값도 있습니다.