반응형
CSS background-repeat 속성
기본적으로 배경 이미지 속성은 이미지를 수평 및 수직으로 반복한다.
일부 이미지는 수평 또는 수직으로만 반복해야 한다. 그렇지 않으면 다음과 같이 이상하게 보일 수 있다:
| <!DOCTYPE html> <html> <head> <style> body { background-image: url("gradient_bg.png"); } </style> </head> <body> <h1>Hello World!</h1> <p>이상한 배경 이미지...</p> </body> </html> |
위의 코드를 실행한 결과 화면이 아래 그림이다.
위의 이미지가 수평으로만 반복되는 경우(background-repeat: repeat-x;) 배경이 더 잘 나타난다:
| <!DOCTYPE html> <html> <head> <style> body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } </style> </head> <body> <h1>Hello World!</h1> <p>여기서 배경 이미지는 수평으로만 반복됩니다!</p> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다. 반복되는 그림이미지가 하나로 단순화한다.
CSS background-repeat:no-repeat
배경 이미지를 한 번만 표시하는 것도 background-repeat 속성으로 지정할 수 있다:
| <!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>배경이미지 예제</p> <p>배경 이미지는 한 번만 표시되지만 판독기에 방해가 됩니다!</p> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
위의 예에서 배경 이미지는 텍스트와 동일한 위치에 배치된다. 우리는 텍스트를 너무 방해하지 않도록 이미지의 위치를 변경하고 싶다.
CSS background-position 속성
배경 위치 속성은 배경 이미지의 위치를 지정하는 데 사용된다.
| <!DOCTYPE html> <html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style> </head> <body> <h1>Hello World!</h1> <p>배경이미지 예제</p> <p>배경 이미지는 한 번만 표시되지만 판독기에 방해가 됩니다!</p> </body> </html> |
위의 코드를 실행하면 배경 이미지 위치가 오른쪽으로 이동한 것을 볼 수 있다.
지금까지 background-repeat와 background-position 속성에 관해 간략히 살펴보았다.
모두 화이팅입니다.!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS background - shorthand 속성 (0) | 2023.07.10 |
|---|---|
| CSS background-attacthment (0) | 2023.07.09 |
| CSS 배경이미지(CSS Background Image) (0) | 2023.07.07 |
| CSS 배경(CSS Background) (0) | 2023.07.06 |
| CSS HSL 색상 (0) | 2023.07.05 |
댓글