CSS/속성 - 배경
background-repeat
컴공 윤서혜 학습일기
2021. 1. 12. 12:34
배경 이미지의 반복을 설정
속성 값
| 값 | 의미 | 기본값 |
| 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;
}