CSS background ( 배경 스타일 )

background ( 배경 스타일 )

CSS를 이용해서 HTML 요소에 배경색 또는 이미지를 넣는 속성이다.

1. background-color : 배경의 색상을 넣는 속성. 속성값은 rgb(), HEX, 색상이름 등

div{
	background-color : red;
}

2. background-image : 배경의 이미지를 넣는 속성. 이미지의 url주소가 들어가게 되며 상대주소, 절대주소가 있다.
   ( 넣을 수 있는 확장자 : jpg, png, gif, svg 등등 )

div{
	background-image: url('../images/milkway01.png');
}

3. background-repeat : background-image로 넣은 이미지를 반복을 시킬 것인지 아닌지, 가로나 세로로만 반복을 시킬 지를 정하는 속성

• repeat : 이미지가 가로 세로 바둑판 식으로 반복되어 보여준다.
• repeat-x : 이미지가 x 축 (가로)로만 반복된다.
• repeat-y : 이미지가 y 축 (세로)로만 반복된다.
• no-repeat : 이미지를 한 번만 보여주고 반복하지 않는다.
• inherit : 부모 속성을 상속받는다.

div{
	background-repeat: no-repeat;
}

4. background-position : background-image로 넣은 이미지의 좌표 값을 정하는 속성입니다. 'px'나 '%'등으로 x축 y축으로 넣는다. 좌표값이 커질 수록 x축에서는 오른쪽, y축에서는 아래쪽으로 이동한다. ( 음수일경우는 반대 ) 50%일경우 가운데 정렬

div{
	background-position: 50px 50px; // 왼쪽에서 오른쪽으로 50px
                                        // 위쪽에서 아래쪽으로 50px
}

• top : 위쪽 정렬
• bottom : 아래쪽 정렬
• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 중앙 정렬
• right bottom : 오른쪽 하단
• left bottom : 왼쪽 하단 등등..

5. background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 레이아웃에서 고정할지를 정한다.

• fixed : 배경을 뷰포트에 대해 고정시킨다.

• local : 배경을 요소 컨텐츠에 대해 고정시킨다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤 된다.

• scroll : 배경을 요소 자체에 대해 고정한다. 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않는다. ( 기본값 )

6. background-size : 요소에 배경 이미지를 요소 공간에 맞추거나 늘리고 줄일때 쓴다.

• contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정

• cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. ( 요소에 꽉 차게 ) 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정

• auto : 배경 이미지의 원본 크기를 유지

background-image관련 속성 프로퍼티를 안쓰고도 한줄에 전부 쓸 수 있다.

div{
	background: url("") no-repeat right top;
}

출처 - http://webberstudy.com/html-css/css-1/background/
https://developer.mozilla.org/ko/docs/Web/CSS/background-attachment