반응형
CSS background-image 속성
background-image 속성은 요소의 배경으로 사용할 이미지를 지정한다.
기본적으로 이미지는 반복되므로 전체 요소를 포함한다.
| <!DOCTYPE html> <html> <head> <style> body { background-image: url("paper.gif"); } </style> </head> <body> <h1>Hello World!</h1> <p>이 페이지는 이미지를 배경으로 합니다!</p> </body> </html> |
위의 코드를 실행하면 배경 이미지로 "paper.gif"그림이 채워진다. 결과 화면은 아래 그림과 같다.
배경 이미지는 <p> 요소와 같은 특정 요소에 대해서도 설정할 수 있다:
| <!DOCTYPE html> <html> <head> <style> p { background-image: url("paper.gif"); } </style> </head> <body> <h1>Hello World!</h1> <p>이 단락은 이미지를 배경으로 합니다!</p> </body> </html> |
p 요소에 배경이미지를 "paper.gif"이미지로 설정하였다. 아래 그림은 위의 코드를 실행한 결과 화면이다.
지금까지 background-image 속성을 활용하여 배경이미지를 설정하는 예제를 살펴보았다.
꼭 실습해보시기를 바랍니다.
모두 화이팅입니다.!!!
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS background-attacthment (0) | 2023.07.09 |
|---|---|
| CSS 배경이미지 반복(CSS background image repeat) (0) | 2023.07.08 |
| CSS 배경(CSS Background) (0) | 2023.07.06 |
| CSS HSL 색상 (0) | 2023.07.05 |
| CSS HEX Colors (0) | 2023.07.04 |
댓글