css background-image 속성

■ 웹 페이지의 배경은 일반 색깔로 처리할 수도 있지만, 주제와 맞는 이미지를 사용하는 경우가 대부분일 겁니다. 이번 글에서는 이미지를 이용해서 홈페이지의 배경을 삽입하는 과정을 알아보고, background-image의 속성 중에서 background-repeat에 대해서 정리해볼까 합니다. background-size에 관련된 내용은 지난번 글에서 정리했었는데요. 참고하실 분들은 아래 글 참고하시구요.

http://godvow.tistory.com/105 ◀◀ background-size

■ 배경이미지를 넣는 형식은 다음과 같습니다.

background-image:url(파일경로);

이때 사용할 수 있는 파일의 형식은 jpg, gif, png 등입니다. 여기서는 png 파일을 이용할거구요. HTML 문서와 이미지 파일을 같은 폴더에 넣어서 진행할 거라서 파일 경로에는 파일의 이름만 적히게 될 겁니다.

그리고 간단한 내용이니까 '스타일 시트' 파일을 따로 작성하지 않고, <head> 태그 안에 <style> 태그를 이용해서 작성하겠습니다.

▲ <body>의 배경을 준비한 이미지로 넣어봤습니다. 브라우저에서 출력해볼게요.

▲ 이렇게 배경이미지가 들어가게 되는데요. 배경 이미지가 요소의 크기보다 작을 때는 가로와 세로로 반복되면서 가득 채우게 되는데요. 이렇게 반복되지 않게 하는 속성은 background-repeat입니다. 이 속성을 이용해서 반복하지 않도록 설정하겠습니다.

▲ [background-repeat : no-repeat:] 속성값을 적용했습니다. 여기에서 속성값에 들어갈 수 있는 것들은 기본값인 repeat(가로와 세로 반복), no-repeat(반복하지 않음) 그리고 repeat-x(가로만 반복)와 repeat-y(세로만 반복) 등이 있는데요. 먼저 no-repeat 속성을 적용해보고, 나머지도 하나씩 해볼게요.