태야

 css 배경 이미지, background-image 

배경이미지 속성

배경이미지를 불러오는 방식 2가지이다.

background-image:url(img/cat.png);

▷ 부모속성보다 이미지가 작을 경우 반복되는 성격을 가진다.

background-image:url(img/cat.png),url(img/dog.png); 

▷ 배경이미지를 반복해 불러올 때 쉼표로 표현한다. 그러나 앞쪽에 불러온 이미지가 위쪽으로 표현된다.

다음으로 배경이미지를 사용할 때 사용하는 여러 가지 속성들이다.

background-repeat:no-repeat;

▷ 반복하지 않겠다는 의미이다.

background-repeat:repeat-x;
background-repeat:repeat-y;

▷ 각각 x방향, y방향으로 반복을 설정한다.

background-size:100%;
background-size:auto;
background-size:cover;

위에서 부터 차례대로,

▷ 고정비로 100%를 나타낸다.

▷ 원래 이미지 크기를 유지한다.

▷ 비율을 유지하며 요소가 꽉 차도록 한다.

background-attachment:scroll;
background-attachment:fixed;

▷ 배경이미지가 스크롤에  영향을 받는다.

▷ 배경이미지가 화면에 고정된다.

background-position: x위치, y위치;

▷x위치(left, right, center), y 위치(top, center, bottom)를 또는 % 값을 이용해 배경의 위치를 설정해준다.