뒷 배경 이미지를 요소의 배경에 추가하는 6개의 예제를 아래에 상세히 설명하겠습니다. 각 예제는 다른 방법으로 배경 이미지를 적용하는 방법을 보여줍니다.
예제 1: 배경 이미지 적용
이 예제에서는 background-image 속성을 사용하여 요소에 배경 이미지를 적용합니다. background-size를 사용하여 이미지의 크기를 조절하고, background-repeat을 사용하여 이미지 반복을 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.bg-image {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg-image"></div>
</body>
</html>
예제 2: 배경 이미지 위치 조절
이 예제에서는 background-position 속성을 사용하여 배경 이미지의 위치를 조절합니다. 이미지의 가로 위치와 세로 위치를 조절하여 원하는 위치에 이미지를 배치할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.bg-position {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center top; /* 이미지를 가운데 상단에 배치 */
}
</style>
</head>
<body>
<div class="bg-position"></div>
</body>
</html>
예제 3: 반복 배경 이미지
이 예제에서는 background-repeat 속성을 사용하여 배경 이미지를 반복하여 나타냅니다. 이미지를 가로와 세로로 반복할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.bg-repeat {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-repeat: repeat; /* 이미지를 가로세로로 반복 */
}
</style>
</head>
<body>
<div class="bg-repeat"></div>
</body>
</html>
예제 4: 고정 배경 이미지
이 예제에서는 background-attachment 속성을 사용하여 배경 이미지를 고정합니다. 스크롤해도 배경 이미지가 고정된 상태로 유지됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.bg-fixed {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-attachment: fixed; /* 배경 이미지를 고정 */
}
</style>
</head>
<body>
<div class="bg-fixed"></div>
</body>
</html>
예제 5: 다중 배경 이미지
이 예제에서는 다중 배경 이미지를 적용합니다. 여러 개의 이미지를 겹쳐서 배경으로 표시할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.multi-bg {
width: 300px;
height: 200px;
background-image: url('image1.jpg'), url('image2.jpg');
background-size: cover, auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="multi-bg"></div>
</body>
</html>
예제 6: 그라데이션 배경 이미지
이 예제에서는 그라데이션 배경 이미지를 적용합니다. linear-gradient 또는 radial-gradient를 사용하여 그라데이션 배경을 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-bg {
width: 300px;
height: 200px;
background-image: linear-gradient(to right, red, yellow); /* 가로 그라데이션 */
}
</style>
</head>
<body>
<div class="gradient-bg"></div>
</body>
</html>
마지막으로, 요청하신 태그를 # 없이 ,와 함께 한 줄로 정리하겠습니다.
'CSS' 카테고리의 다른 글
| 3D 효과: 요소에 3D 효과 적용. (0) | 2023.12.23 |
|---|---|
| 반복 배경 이미지: 배경 이미지 반복 설정. (0) | 2023.12.23 |
| 페이드 인/아웃: 요소의 페이드 인/아웃 효과. (1) | 2023.12.23 |
| 화면 가운데 정렬: 요소를 화면 가운데 정렬. (0) | 2023.12.23 |
| 툴팁 스타일링: 툴팁 디자인 커스터마이징. (0) | 2023.12.23 |