웹 페이지에 이미지를 삽입할 때는 태그를 사용합니다. 이와 같이 이미지를 직접 삽입할 수도 있지만 CSS를 이용하여 HTML 요소에 배경으로
이미지를 삽입할 수 있습니다. 배경 이미지는 박스 형태의 요소에 밑 그림을 넣는 데 사용됩니다.
배경 이미지 안에는 배경 색상과 마찬가지로 텍스트나 이미지와 같은 요소들이 삽입될 수 있습니다.
배경 이미지 삽입
ex4-1.html
<style> body { background-image: url("img/bg1.png");
} </style> <body> <h3>배경 이미지 삽입</h3> <p>웹 페이지에 배경 이미지를 삽입하는 데에는 background-image 속성을 이용한다. 배경 이미지가 들어갈 영역보다 작을 때에는 배경 이미지가 수평과 수직 방향으로 반복된다.</p> </body>
ex4-1.html의 실행 결과
■ 배경 이미지 반복과 배치
CSS의 background-repeat 속성을 사용하면 배경 이미지를 반복하지 않고 한 번만 사용하거나 수평
방향 또는 수직 방향으로만 반복하도록 설정할 수 있습니다. 그리고 배경 이미지를 특정 위치에 배치하는
데에는 background-position 속성을 사용합니다.
배경 이미지 반복과 배치
ex4-2.html
<style> body { background-image: url("img/pineapple.jpg");
background-repeat: no-repeat;
background-position: right top;
} p { width: 500px; line-height: 180%;} </style> <body> <h3>파인애플</h3> <p>파인애플은 비타민이 풍부하여 피로회복에 도움을 주고, 효소 성분이 소화와 연육작용을 돕는
역할을 하는 맛과 영양 기능까지 갖춘 팔방미인 과일이다.</p> </body>
ex4-2.html의 실행 결과
배경 이미지의 반복 설정에 사용된 background-repeat 속성 값을 정리하면 다음과 같습니다.
배경 이미지의 위치를 설정하는 background-position 속성 값을 표로 정리하면 다음과 같습니다.
