CSS - backgroundRepeat 사용방법

안녕하세요.

오늘은 CSS에서 background-repeat 속성에 대해서 간단히 알아보도록 하겠습니다.

background-repeat이란?

• background-repeat으로 배경 이미지의 반복 여부 또는 반복 방향을 정할 수 있습니다.
• 특정 패턴의 이미지를 width의 길이에 상관없이 반복하고자할 경우 사용합니다.
  

아래와 같은 패턴이 반복될 경우, 작은 패턴의 이미지를 하나 만들고 background-repeat을 사용해 구현할 수 있습니다.

예제 코드

body {
  width: 100%;
  background-image: url("이미지 경로 입력");
  background-repeat: repeat-x; // repeat-y, no-repeat 등의 옵션 사용 가능
}

참조

• https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-repeaty

모두 즐거운 코딩하세요~