:해당 요소의 배경으로 이미지 또는 색상을 정의
1.Background-image 프로퍼티
: 요소에 배경 이미지 지정
body {
background-image: url(" ");
background-color: #cccccc;
}- 하나 이상의 배경 이미지 설정(하나 이상일 경우 쉼표로 구분)
- 기본적으로 배경 이미지는 요소의 왼쪽 상단 모서리에 배치, 수직 및 수평으로 반복
- 이미지 넣으면 padding 포함해서 배경 설점됨(margin 제외)
- 상속은 되지 않음
- 배경 이미지가 제대로 뜨지 않을 경우 background-color로 대체할 수 있게 같이 지정해주어야 함
- 맨 처음 지정한 이미지가 제일 위에 위치
2.Background-repaeat 프로퍼티
: 배경 이미지 반복 지정 (수직, 수평 또는 수직과 수평 모두의 반복 지정 가능)
- 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력됨(background-repaet 프로퍼티의 기본값이 repeat이기 때문)
background-repeat: repeat-x;: x축으로만 배경 이미지 반복background-repeat: repeat-y;: y축으로만 배경 이미지 반복background-repeat: no-repeat;: 반복출력❌- 맨 처음 지정한 이미지가 전면에 출력
3.Background-size 프로퍼티
:배경 이미지의 사이즈 지정, 배경 이미지의 고유 비율을 유지하기 때문에 설정에 따라 이미지 일부가 보이지 않을 수 있음
- 프로퍼티값은 px, %, cover, contain 등을 사용
- width, height 모두 설정 가능, 이때 첫번째 값은 width 두번째 값은 height의미
- 하나의 값만 지정할 경우 width를 의미, height는 auto로 지정
(1)px값 지정
: 배경 이미지 쿠가거 지정된 px값 그대로 지정
background-size: width height;
(2)%값 지정
: 배경 이미지 크기가 지정된 %값에 비례하여 설정 -> 크기에 따라 변경되어 찌그러지는 현상 생김
background-size: width% height%;
(3)cover지정
: 배경 이미지의 크기 비율을 유지한 상태에서 부모요소의 width, height 중 큰값에 배경이미지를 맞춰서 이미지의 일부가 보이지 않을 수 있음
background-size: cover;
(4)contain 지정
- 배경이미지의 크기 비율 유지한 상태에서 부모 요소의 영역에 배경 이미지가 보이지 않는 부분 없이 전체가 들어갈 수 있도록 이미지 스케일을 조정
- width, height의 프로퍼티 값은 공백으로 구분
background-size: containd;
4.Background-attachment 프로퍼티
background-attachment: fixed; : 화면이 스크롤 되더라도 배경 이미지는 스크롤 되지 않고 고정되어있게 함
5.Background-attachment 프로퍼티
- 일반적으로 background-image는 좌상단부터 이미지 추력, background-position 프로퍼티를 사용하면 이미지 좌표(xpos, ypos)지정 가능
- 기본값은
background-position: 0% 0%;로 배경 이미지는 우측 상단에 위치 background-position: letf top;
6.Background-color 프로퍼티
: 요소의 배경 색상 지정, 색상값 또는 tranparent 키워드를 지정할 수 있다.
7.Background Shorthand
: background-color, background-image, background-repeat, background-position을 한번에 정의하기 위한 shorthand syntax
background: color url(" ") repeat attachment position;
Reference
