기술
background-repeat는 배경 이미지가 반복되는 방향을 정의합니다 (있는 경우).
가능한 값
repeat − 배경 이미지가 가로 및 세로 축을 따라 반복되도록합니다.
repeat-x − 배경 이미지가 x 축을 따라 반복되도록합니다.
repeat-y − 배경 이미지가 y 축을 따라 반복되도록합니다.
no-repeat − 배경 이미지가 전혀 반복되지 않도록합니다.
적용
모든 HTML 요소.
DOM 구문
object.style.backgroundRepeat = "Any of the above values";
예
다음은 이미지가 작은 경우 배경 이미지를 반복하는 방법을 보여주는 예입니다. 이미지를 반복하지 않으려면 background-repeat 속성에 no-repeat 값을 사용할 수 있습니다 .이 경우 이미지는 한 번만 표시됩니다.
기본적으로 background-repeat 속성에는 repeat 값이 있습니다.
<html>
<head>
<style>
body {
background-image: url("/https/isolution.pro/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
다음 결과가 생성됩니다-
다음은 배경 이미지를 세로로 반복하는 방법을 보여주는 예입니다.
<html>
<head>
<style>
body {
background-image: url("/https/isolution.pro/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
다음 결과가 생성됩니다-
다음은 배경 이미지를 가로로 반복하는 방법을 보여주는 예입니다.
<html>
<head>
<style>
body {
background-image: url("/https/isolution.pro/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
다음 결과가 생성됩니다-