background ( 배경 스타일 )
CSS를 이용해서 HTML 요소에 배경색 또는 이미지를 넣는 속성이다.
- background-color : 배경의 색상을 넣는 속성. 속성값은 rgb(), HEX, 색상이름 등
div{
background-color : red;
}- background-image : 배경의 이미지를 넣는 속성. 이미지의 url주소가 들어가게 되며 상대주소, 절대주소가 있다.
( 넣을 수 있는 확장자 : jpg, png, gif, svg 등등 )
div{
background-image: url('../images/milkway01.png');
}- background-repeat : background-image로 넣은 이미지를 반복을 시킬 것인지 아닌지, 가로나 세로로만 반복을 시킬 지를 정하는 속성
- repeat : 이미지가 가로 세로 바둑판 식으로 반복되어 보여준다.
- repeat-x : 이미지가 x 축 (가로)로만 반복된다.
- repeat-y : 이미지가 y 축 (세로)로만 반복된다.
- no-repeat : 이미지를 한 번만 보여주고 반복하지 않는다.
- inherit : 부모 속성을 상속받는다.
div{
background-repeat: no-repeat;
}- 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 : 왼쪽 하단 등등..
- background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 레이아웃에서 고정할지를 정한다.
-
fixed : 배경을 뷰포트에 대해 고정시킨다.
-
local : 배경을 요소 컨텐츠에 대해 고정시킨다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤 된다.
-
scroll : 배경을 요소 자체에 대해 고정한다. 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않는다. ( 기본값 )
- 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
