background-repeat

배경 이미지의 반복을 설정

 

속성 값

값	의미	기본값
repeat	배경 이미지를 수직, 수평으로 반복	repeat
repeat-x	배경 이미지를 수평으로 반복
repeat-y	배경 이미지를 수직으로 반복
no-repeat	반복 없음

 

 

1. repeat-x

.box{
  width: 550px;
  height: 350px;
  border: 2px solid lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size:100px;
  background-repeat: repeat-x;
}

가로만 출력

이미지의 크기를 100px로 하고 가로만 반복 출력하게 만들었다.

 

 

2.repeat-y

.box{
  width: 550px;
  height: 350px;
  border: 2px solid lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-size:100px;
  background-repeat: repeat-y;
}

세로만 출력