background

background : url() 위치, 반복형태;

css3에서는 박스 요소 1개당 백그라운드 이미지를 여러개를 사용할수 있게 되었다.  => 다중 백그라운드

브라우저가 읽지 못할 경우를 대비해서 일반 배경이미지를 넣어 둔다.

 

background-clip
배경이미지의 영향을 받는 부분을 board영역까지 확장할 수 있는 속성.

❕ 속성

padding-box : padding영역부터 까지 배경 이미지를 표시함 (기본값)

border-box : border영역까지 배경 이미지를 표시함

 

 

background-origin

배경의 원점을 지정하는 속성(padding/border/content)

❕ 속성

padding-box : padding영역부터 이미지를 배치함 (기본값)
border-box : border영역부터 이미지를 배치함
content-box : content영역부터 이미지를 배치함

 

background-size 
배경이미지 자체의 크기를 제어할 수 있음

background-size : [x], [y];
백 그라운 이미지의 크기를 지정한다.
❕ 속성
[x]% [y]% : 적용되는 요소의 크기에 비례하여 배경 이미지 적용
[x]px [y]px : 절대 크기로 배경 이미지 적용
 cover : 배경 이미지를 늘여 적용되는 요소 전체에 표시(중요)

커버 속성을 적용하면 너비/높이의 큰 축을 찾아 그 축을 기준으로 이미지 비율을 맞춘다.

커버의 위치 속성은 그 위치에 따라 비율이 결정되므로 위치도 신경쓴다 .

sizeBox02 {
width: 70%;
height: 300px;
background: url(./images/ph1.jpg) left bottom no-repeat;
// 왼쪽 아래 기준으로 크기가 변경된다.
background-size: cover;

contain : 배경 이미지의 가로 세로 비율을 맞춰 요소에 표시할수 있는 최대 크기로 표시