css_background

박스 모델의 바깥쪽 여백을 제외한 나머지 영역 안

background 하위 속성

-color : 요소의 배경 색상 지정 / 색상

background-color: yellowgreen;

-clip : 요소 내 배경의 적용 범위 / 별도의 키워드

background-clip: border-box; //경계선 까지
background-clip: padding-box; //padding 까지만 표시
background-clip: content-box; //content영역에서만 배경을 표시 

-image : 요소의 배경 이미지 지정 / 이미지 url

background-image: url(images/image.jpg);

-origin : 요소 내 배경의 시작 위치 / 별도의 키워드

background-origin: border-box; //이미지 시작 위치 지정(border-box부터 지정)
background-origin: padding-box; //기본값
background-origin: content-box;

-size : 배경 이미지의 크기 / 수치와 단위

background-size: 380px 380px; //너비와 높이를 같이 지정

-position : 배경 이미지의 위치 / 수치와 단위

top, bottom, left, right, center
(키워드 조합 가능)
background-position: left center; //키워드 조합
background-position: 100px 50px; //좌 상단 기준으로 x축 100px이동, y축 50px이동

-repeat : 배경 이미지의 반복 패턴 / 별도의 키워드

background-repeat: no-repeat; 
//만약 배경사이즈를 줄이면 같은 이미지가 바둑판식으로 반복됨. 이걸 적용하지 않기 위한 속성
background-repeat: repeat-x; //가로 반복