background - image

background-image: url(img/art.jpg);

/* 배경이미지 불러오는 속성 url을 나타내는 속성, 반복되는 성격을 가지고 있다. 배경 이미지 두장을 겹치는 예시

,로 구분지어서 배경이미지를 두장이상 적용할 수 있다. 먼저 작성한 이미지가 상단에 위치한다. */

/* background-image: url(img/cat_bg.png), url(img/land.png);*/

 

background-repeat

/* no-repeat 원래는 이미지가 반복되는데, 반복되지 않고 한장만 볼수 있게 만듬.

repeat-x x축-가로로만 반복됨.

repeat-y y축-세로로만 반복 */

background-repeat: no-repeat;

 

/* 가로 세로 비율 사이즈, cover: 꽉 차면서 가로 세로 비율을 최대한 유지하기...*/

background-size: 100%;

 

/* background-attachment - 배경 이미지를 어케 할지 지정하는 속성

fixed: 스크롤을 움직여도 배경이미지 고정

scroll: 기본값: 스크롤시 배경도 같이 스크롤됨.*/

background-attachment:scroll;

 

/*배경이미지를 어떤 방식으로 화면에서 표현할지 지정하는 속성*/

background-position: 200px 100px;

 

/*배경이미지의 위치를 지정하여 표현가능한 속성

x , y >> 단어,px,%

x(left,center,right)

y(top,center,bottom)

*/