CSS3 Multi Background 멀티백그라운드 두가지 사용법
CSS 속성에서 백그라운드를 지정할 수 있다는것은 알고 계실 것입니다. 만약 이미지를 사용한 백그라운드를 만들 때, 하나가 아닌 여러개의 이미지를 써서 멀티 형식으로 구현도 가능하다는것을 오늘 배웠습니다. 어떻게 사용되는지 한번 살펴보겠습니다.
방법은 크게 두가지가 있습니다. 백그라운드별 다른 매서드를 사용하는 방법, 하나의 백그라운드 스타일에 몽땅 마크업 하는 방법 이렇게 두가지죠. 각각 하나씩 보시면 이해가 될 것입니다. 먼저 이미지 소스부터 이곳에 업로드를 하겠습니다.
첫번째 방법 : 백그라운드 매소드별로 마크업
▲출처 : 포토샵에서 직접 만듦
이미지 준비는 다 되었습니다. 보통은 백그라운드를 html 문서의 전체에 적용하므로 여기에서도 body 영역안에 넣도록 하겠습니다. 따라서 html 상태의 마크업은 따로 하지 않고, 바로 CSS 부분만 말씀드리겠습니다.
body {
background-image: url(이미지주소1), url(이미지주소2), url(이미지주소3);
background-repeat: repeat-x, no-repeat, repeat-x;
background-position: top, center, bottom;
background-attachment: fixed, fixed, fixed;
}
이렇게 마크업 하시면 됩니다. 각각 하나씩 설명을 드리겠습니다.
●background-image: url(이미지주소1), url(이미지주소2), url(이미지주소3); ▶ 이미지 경로를 지정해 주시면 됩니다.
●background-repeat: repeat-x, no-repeat, repeat-x; ▶ 백그라운드 이미지의 반복됨을 설정합니다. repeat-x 는 X축, 즉 가로열에 대하여 반복적으로 보여지게 하는 것 입니다. 세로는 repeat-y 입니다. no-repeat은 반복없음 입니다.
●background-position: top, center, bottom; ▶ 백그라운드 위치 설정입니다. top은 맨 위에, center는 정 중앙, bottom은 맨 아래 입니다.
●background-attachment: fixed, fixed, fixed; ▶ 백그라운드의 부착(?) 상태를 뜻합니다. 모니터 해상도의 변경, 브라우저의 창 변경, 스크롤의 영향을 받지 않고 늘 그자리에 있게 하려면 fixed로 설정하시면 됩니다. 기본 형태는 스크롤 입니다.
보시면 공통점이 있습니다. 각 매소드마다 스타일 요소가 3개씩 들어있습니다. 이미지가 3개면 나머지 반복됨아러던지, 위치라던지 attachment 부분에서라던지 이에 맞게 3개씩 지정해 주셔야 합니다. 그래야 각 백그라운드에 사용할 이미지가 원하는 위치와 설정으로 세팅이 되니까요. 만약 이미지가 두개면 나머지 요소들도 두개씩 맞춰주셔야 합니다. 이제 결과물을 살펴보겠습니다.
See the Pen Multi Background by rgy0409 (@rgy0409) on CodePen.
이렇게 배치가 됩니다. 현재 이곳에서는 창크기에 따른 변화를 살펴볼수는 없지만 만약 창 크기를 변경한다해도 가운데 있는 이미지는 늘 가운데 있고, 나머지 이미지 또한 늘 같은 자리에 있습니다. 크기도 변화하지 않습니다.
두번째 방법 : 백그라운드 요소 하나에 모두 마크업
위의 백그라운드 매소드 요소들을 하나로 합치겠습니다. 개인적으로 저는 두번째 방법을 더 선호합니다. 깔끔하고 간단하게 만들 수 있기 때문입니다.
body {
background: url(이미지주소1) repeat-x top fixed, url(이미지주소2) no-repeat center fixed, url(이미지주소3) repeat-x bottom fixed;
}
그렇죠? 이게 훨씬 더 보기가 좋습니다. 주의하실점은 쉼표를 잘 찍어주셔야 합니다. 하나의 이미지에 대한 위치나 반복설정 등등을 마크업 하신 다음에 쉼표를 넣고, 다음 이미지에 대한 주소와 나머지 스타일 요소들을 정확히 지정해 주시면 되며 첫번째 방법과 동일하게 스타일 개수를 맞춰주시기만 하면 됩니다. 이렇게 하면 결과는 위의 미리보기와 똑같이 나올 것 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
