background-image 상세 설명

배경 그림
background-image 속성은 배경에 그림을 표시할 수 있도록 지정합니다.백그라운드-color와 연결할 수 있기 때문에 그림이 중복되지 않으면 그림이 덮이지 않는 곳은 배경색으로 채워집니다.코드는 매우 간단합니다. 경로가 스타일시트에 비해 있기 때문에 아래의 코드에서 그림과 스타일시트는 같은 디렉터리에 있습니다.

background-image: url(image.jpg);

그러나 이미지라는 하위 디렉터리에 그림이 있다면 다음과 같다.

background-image: url(images/image.jpg);

배경 바둑판(background-repeat)
배경 그림을 설정할 때, 기본적으로 그림을 수평과 수직 방향으로 전체 요소를 깔아 놓습니다.이것은 아마도 네가 필요로 하는 것일 것이다. 그러나 때로는 그림이 한 번만 나타나거나 한 방향으로만 평평하게 깔리기를 바란다.가능한 설정 값과 결과는 다음과 같습니다.

background-repeat: repeat; /*    ，           */  

background-repeat: no-repeat; /*    。       。 */  

background-repeat: repeat-x; /*       (  x  ) */  

background-repeat: repeat-y; /*       (  y  ) */  

background-repeat: inherit; /*        background-repeat   */

배경 포지셔닝(background-position)
background-position 속성은 배경 그림이 요소의 위치를 제어하는 데 사용됩니다.기교는 실제로 그림의 왼쪽 상단이 원소의 왼쪽 상단에 대한 위치를 지정하는 것이다.다음 예에서 배경 그림을 설정하고 백그라운드-position 속성으로 위치를 제어하는 동시에 백그라운드-repeat을 no-repeat로 설정합니다.계량 단위는 픽셀이다.첫 번째 숫자는 x축(수평) 위치를 나타내고 두 번째는 y축(수직) 위치를 나타낸다.

  ： background-position: 0 0;

    ：background-position: 75px 0;    

    ：background-position:  -75px  0;

    ： background-position:  0  100px;