배경 이미지는 거의 모든 HTML 요소에 대해 지정할 수 있다.
HTML 요소에서 배경이미지 속성
HTML 요소에 배경 이미지를 추가하려면, HTML style 속성과 CSS background-image 속성을 사용한다:
| <!DOCTYPE html> <html> <body> <h2>배경이미지</h2> <p>a p 요소에 대한 배경이미지:</p> <p style="background-image: url('img_girl.jpg');"> 배경 이미지를 지정할 수 있습니다<br> 표시되는 모든 HTML 요소에 대해.<br> 이 예에서는 배경 이미지<br> 요소에 대해 지정되었습니다.<br> 기본적으로 background-image<br> 방향으로 반복됩니다<br> 요소보다 작은 경우<br> 지정된 위치에 있습니다. 크기를 조정해 보십시오<br> 브라우저 창에서 어떻게 하는지 확인합니다<br> 배경 이미지가 동작합니다.. </p> </body> </html> |
<head> 섹션의 <style> 요소에서 배경 이미지를 지정할 수도 있다:
| <!DOCTYPE html> <html> <head> <style> p { background-image: url('img_girl.jpg'); } </style> </head> <body> <h2>배경이미지</h2> <p>a p 요소에 대한 배경이미지:</p> <p> 배경 이미지를 지정할 수 있습니다<br> 표시되는 모든 HTML 요소에 대해.<br> 이 예에서는 배경 이미지<br> 요소에 대해 지정되었습니다.<br> 기본적으로 background-image<br> 방향으로 반복됩니다<br> 요소보다 작은 경우<br> 지정된 위치에 있습니다. 크기를 조정해 보십시오<br> 브라우저 창에서 어떻게 하는지 확인합니다<br> 배경 이미지가 동작합니다.. </p> </body> </html> |
페이지 상의 배경이미지
전체 페이지에 배경 이미지를 지정하려면 <body> 요소에 배경 이미지를 지정해야 한다:
| <!DOCTYPE html> <html> <head> <style> body { background-image: url('img_girl.jpg'); } </style> </head> <body> <h2>배경이미지</h2> <p>기본적으로 배경 이미지는 지정된 요소(이 경우 본문 요소)보다 작을 경우 반복됩니다.</p> </body> </html> |
배경이미지 반복
배경 이미지가 요소보다 작으면 이미지가 요소의 끝에 도달할 때까지 수평 및 수직으로 반복된다:
| <!DOCTYPE html> <html> <head> <style> body { background-image: url('example_img_girl.jpg'); } </style> </head> <body> <h2>배경이미지 반복</h2> <p>기본적으로 배경 이미지가 지정된 요소(이 경우 신체 요소)보다 작을 경우 배경 이미지가 반복됩니다.</p> </body> </html> |
배경 이미지가 반복되지 않도록 하려면 background-repeat 속성을 no-repeat으로 설정한다.
| <!DOCTYPE html> <html> <head> <style> body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat; } </style> </head> <body> <h2>반복되지 않는 배경이미지</h2> <p>백그라운드 반복 속성을 "반복 없음"으로 설정하여 이미지가 반복되지 않도록 할 수 있습니다.</p> </body> </html> |
배경표지(Background Cover)
배경 이미지가 전체 요소를 덮도록 하려면 background-size 속성을 cover 설정할 수 있다.
또한 전체 요소가 항상 포함되도록 하려면 background-attacthment 속성을 fixed 설정한다:
이렇게 하면 배경 이미지가 신장 없이 전체 요소를 덮는다(이미지가 원래 비율을 유지함):
| <!DOCTYPE html> <html> <head> <style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style> </head> <body> <h2>배경 표지</h2> <p>배경 크기 속성을 "덮기"로 설정하면 배경 이미지가 전체 요소(이 경우 본문 요소)를 덮습니다.</p> </body> </html> |
배경이미지 확장(Background Strech)
배경 이미지가 전체 요소에 맞게 늘어나도록 하려면 backgournd-size 속성을 100% 100%로 설정할 수 있다:
브라우저 창의 크기를 조정해 보면 이미지가 늘어나지만 항상 전체 요소를 덮는다.
| <!DOCTYPE html> <html> <head> <style> body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } </style> </head> <body> <h2>배경이미지 확장</h2> <p>배경 크기 속성을 "100% 100%"로 설정하면 배경 이미지가 전체 요소(이 경우 신체 요소)를 덮도록 늘어납니다.</p> </body> </html> |
마무리
이번 글에서는 이미지 확장으로 HTML 문서에서 배경이미지를 설정하는 방법에 대해서 살펴보았다.
꼭~~ 직접 코딩하고 실습해보세요. 귀찮은 것 같지만, 천천히, 나도 모르게 실력이 늘어납니다.^^
모두 화이팅하시구요...
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 파비콘(Favicon) (0) | 2023.05.03 |
|---|---|
| HTML <picture> 요소 (0) | 2023.05.02 |
| HTML 이미지 맵(Image Maps) (0) | 2023.04.30 |
| HTML 이미지(Image) (0) | 2023.04.29 |
| HTML 링크-북마크 생성 (0) | 2023.04.28 |
댓글