배경 이미지를 반복 설정하는 6개의 예제를 CSS와 HTML로 각각 구성하고 상세히 설명해드리겠습니다. 마지막에는 태그를 한 줄에 10개씩 나열해드리겠습니다.
예제 1: 배경 이미지 수평 반복
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image: url('your-image.jpg');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
이 예제에서는 배경 이미지를 수평으로만 반복하도록 설정했습니다. background-repeat: repeat-x;를 사용하여 가로 방향으로 이미지를 반복합니다.
예제 2: 배경 이미지 수직 반복
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image: url('your-image.jpg');
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
이 예제에서는 배경 이미지를 수직으로만 반복하도록 설정했습니다. background-repeat: repeat-y;를 사용하여 세로 방향으로 이미지를 반복합니다.
예제 3: 배경 이미지 반복하지 않음
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image: url('your-image.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
이 예제에서는 배경 이미지를 반복하지 않도록 설정했습니다. background-repeat: no-repeat;를 사용하여 이미지를 한 번만 표시합니다.
예제 4: 배경 이미지 위치 조정
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image: url('your-image.jpg');
background-repeat: repeat-x;
background-position: center top;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
이 예제에서는 배경 이미지를 수평으로 반복하면서 이미지 위치를 가운데 상단에 배치했습니다. background-position: center top;를 사용하여 이미지 위치를 조정합니다.
예제 5: 배경 이미지 크기 조절과 반복
html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image: url('your-image.jpg');
background-repeat: repeat;
background-size: 50px 50px;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
이 예제에서는 배경 이미지의 크기를 조절하면서 이미지를 반복했습니다. background-repeat: repeat;로 이미지를 반복하고, background-size: 50px 50px;로 이미지 크기를 조절했습니다.
예제 6: 배경 이미지 고정과 반복
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image: url('your-image.jpg');
background-repeat: repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>
이 예제에서는 배경 이미지를 고정하면서 이미지를 반복했습니다. background-repeat: repeat;로 이미지를 반복하고, background-attachment: fixed;로 이미지를 고정했습니다.
'CSS' 카테고리의 다른 글
| 텍스트 그라데이션: 텍스트에 그라데이션 효과. (0) | 2023.12.23 |
|---|---|
| 3D 효과: 요소에 3D 효과 적용. (0) | 2023.12.23 |
| 뒷 배경 이미지: 요소의 배경에 이미지 추가. (0) | 2023.12.23 |
| 페이드 인/아웃: 요소의 페이드 인/아웃 효과. (1) | 2023.12.23 |
| 화면 가운데 정렬: 요소를 화면 가운데 정렬. (0) | 2023.12.23 |