background-repeat
■ 웹문서의 배경을 꾸미는 방법 중에서 background-image 속성을 이용해서 배경을 이미지로 채울 수 있는데요. 이 속성을 이용해서 이미지를 넣으면 배경 요소보다 이미지가 작으면 가로와 세로로 배경 요소의 크기만큼 반복되는 게 기본 설정인데요. 이렇게 반복되는 걸 막아주는 게 background-repeat 속성입니다.
■ 아래 글들은 css background 속성과 관련해서 참고하시면 괜찮은 글들이에요. 둘러보실 분들은 보시구요.
http://godvow.tistory.com/108 위치
http://godvow.tistory.com/105 크기
▲ 이 사진을 배경으로 넣어서 예제를 만들어보고 직접 속성값을 입력하면서 적용해볼게요. 이미지 파일은 HTML 파일과 같은 폴더에 저장해놓고 진행하겠습니다. 그리고 스타일 시트를 따로 만들지 않고 <head> 태그 사이에 <style> 태그를 넣을 거구요. 본문 <body>의 배경으로 이 사진을 넣어보겠습니다.
▲ <style> 태그 안에 background-image 속성을 이용해서 이미지 파일을 넣었습니다. 브라우저에서 출력해볼게요.
▲ 그림처럼 가로, 세로 방향으로 모두 반복되면서 출력되는 게 기본 속성입니다. 이렇게 반복되는 속성을 없앨 수도 있구요. 가로 방향으로만 반복하게 할 수도 있고, 세로방향으로만 반복하게 할 수도 있습니다. 하나씩 해볼게요.
먼저 전혀 박복하지 않고, 하나만 출력하도록 하겠습니다.
▲ 이 글의 주제인 background-repeat 속성을 이용하면 되는데요. 속성값에 "no-repeat"를 넣어주시면 반복하지 않고, 삽입한 이미지 한 장만 출력됩니다.
▲ 이미지의 크기를 조절하거나 위치를 변경하는 방법은 앞에서 언급한 글들 보시면 도움이 좀 되실 겁니다. 참고하시구요.
다음은 이미지를 오른쪽(가로)으로만 반복하도록 해보겠습니다.
▲ 속성값에 "repeat-x"를 넣어주시면 되구요.
▲ 그림처럼 가로방향으로만 반복해서 출력됩니다. 세로방향만 반복하게 하려면... 당연히 속성값에 "repeat-y"를 넣어주면 되겠죠?^^
▲ 속성값을 "repeat-y"로 변경해줬구요. 출력해보면....
▲ 세로방향으로만 반복하게 됩니다.
이러게 해서background-repeat 속성에 대해서 알아봤는데요. 상황에 맞게 가로 또는 세로방향으로 반복하시거나, 반복 없이 설정해서 사용하시면 됩니다. 수고하셨어요.
