CSS) background-repeat

1) background-repeat

배경 이미지의 반복을 설정

속성 값

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

 

html

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

css

.box1 {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 100px;
}
.box2 {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 100px;
  background-repeat: no-repeat;
}
.box3 {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 100px;
  background-repeat: repeat-y;
}
.box4 {
  width: 260px;
  height: 200px;
  border: 2px dashed lightgray;
  background-image:
    url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 100px;
  background-repeat: repeat-x;
}

출력결과