CSS에서는 background-image 속성을 사용하여 하나의 요소에 여러 개의 배경 이미지를 동시에 적용할 수 있습니다. 각 이미지는 쉼표(,)로 구분하여 나열하며, 먼저 작성된 이미지가 가장 위쪽(전면)에 표시됩니다.
기본 문법
background-image: url("이미지1.png"), url("이미지2.jpg");예제 코드
다음은 CSS3를 활용해 여러 배경을 추가하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
background-image:
url("https://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
url("https://i.picsum.photos/id/256/1200/300.jpg");
background-position: left bottom, left top;
background-repeat: repeat, repeat;
padding: 15px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>CSS로 구현한 다중 배경</h1>
<div>
<h1>샘플 텍스트</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum
dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum
nobis minima aliquam atque id at sapiente culpa, alias nulla rem.
Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam
doloribus possimus doloremque reprehenderit corporis enim distinctio,
ducimus nisi. Voluptatum vel repudiandae omnis.
</p>
</div>
</body>
</html>코드 설명
- background-image: 두 개의 이미지 URL을 쉼표로 구분하여 지정합니다. 첫 번째 이미지(단풍잎)가 두 번째 이미지 위에 겹쳐서 표시됩니다.
- background-position: 각 배경 이미지의 위치를 개별적으로 설정합니다. 여기서는 첫 번째 이미지를 왼쪽 하단에, 두 번째 이미지를 왼쪽 상단에 배치했습니다.
- background-repeat: 각 이미지의 반복 여부를 설정합니다. 이 예제에서는 두 이미지 모두 반복되도록
repeat로 지정했습니다.
실행 결과
위 코드를 실행하면 단풍잎 이미지와 배경 사진이 서로 다른 위치에 겹쳐져 표시되는 것을 확인할 수 있습니다.
