프로그래밍언어/Html & Css

CSS - backgroundRepeat 사용방법

D.Y 2019. 3. 26. 13:07
반응형


안녕하세요.


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



background-repeat이란?

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


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




예제 코드

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


참조



모두 즐거운 코딩하세요~



반응형