background-repeat

배경 이미지를 반복할 때 쓰인다.

총 4가지의 속성값을 사용할 수 있다.

배경이미지를 X ,Y 상태로 전부 반복할 수가 있고, X 나 Y 방향으로 반복 적으로 표시할 수 있고, 배경이미지를 반복표시하지 않을 수 있다.

 

아래의 속성값은 이미지의 반복이 없도록 설정을 하는 것이다.

p{
      background-image: url('camel.gif');
      background-position: top center;
      background-repeat: no-repeat;
}

background-repeat: no-repeat

아래는 X 방향으로 이미지를 반복적으로 표시하는 화면이다.

p{
      background-image: url('camel.gif');
      background-position: top center;
      background-repeat: repeat-x;
}

background-repeat: repeat-x

아래는 Y 방향으로 이미지를 반복적으로 표시하는 화면이다.

p{
      background-image: url('camel.gif');
      background-position: top center;
      background-repeat: repeat-y;
}

background-repeat: repeat-y

아래 처럼, repeat 로 설정값을 설정하면, 모든 방향으로 배경이미지를 반복한다.

p{
      background-image: url('camel.gif');
      background-position: top center;
      background-repeat: repeat;
}

background-repeat: repeat