CSS 배경 반복

CSS 배경-repeat

기본적으로,background-image 이 속성은 수평과 세로 방향 모두에서 이미지를 반복합니다.

일부 이미지는 수평이나 세로 방향에만 반복되어야 합니다. 그렇지 않으면 이렇게 이상하게 보일 수 있습니다:

예제

body {
  background-image: url("gradient_bg.png");
}

직접 테스트해 보세요

위의 이미지가 수평 방향에만 반복되면 (background-repeat: repeat-x;) 이렇게 하면 배경이 더 좋게 보일 것입니다:

예제

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

직접 테스트해 보세요

힌트:가로로 이미지를 반복하려면 설정하십시오 background-repeat: repeat-y;。

CSS 배경-repeat: no-repeat

background-repeat 속성은 백그라운드 이미지가 한 번만 표시되도록 지정할 수 있습니다:

예제

백그라운드 이미지가 한 번만 표시됩니다:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

직접 테스트해 보세요

위 예제에서 백그라운드 이미지와 텍스트는 같은 위치에 배치되었습니다. 텍스트에 방해가 되지 않도록 이미지 위치를 변경하고자 합니다.

CSS background-position

background-position 속성은 백그라운드 이미지 위치를 지정하는 데 사용됩니다.

예제

백그라운드 이미지를 오른쪽 상단에 배치하려면:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

직접 테스트해 보세요