백그라운드 CSS 이미지 넣는 방법 및 반복속성에 대한 설정
이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다.
먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다.
그러면 이렇게 백그라운드에 입력한 색상이 표현 됩니다.
이제 이미지를 넣어보겠습니다. 이미지 CSS 태그는 위에 나온대로 진행하시면 됩니다. 중요한건 경로를 꼭 제대로 입력하셔야 한다는 것 입니다. 또한 url 다음에 오는 괄호는 절대 붙여써야 한다는 것 입니다. 공간이 있으면 태그가 적용되지 않습니다.
background-image: url(이미지경로);
이렇게 마크업 하시면 되겠습니다. 그리고 아시다시피 이미지를 배경으로 썼으니, 나중에 서버에 올리실 때 경로 그대로 이미지도 위치해야 한다는 것을 잊지 마세요.
결과 화면 입니다. 천둥의 신 냥이가 제대로 썬더볼트를 시전하는 이미지가 정상적으로 출력되고 있습니다.
이미지 요소에 대해 별다른 마크업이 되어 있지 않으면 위에서 보신대로 기본 형태는 x축으로 반복, y축으로 반복되는 형태 입니다. 이번에는 X축으로만 반복되게 만들겠습니다. CSS는 다음과 같습니다.
background-repeat: repeat-x;
한번 결과값을 살펴보겠습니다.
제대로 적용되었습니다.
y축으로의 반복은 끝의 x를 y로만 변경해 주시면 됩니다.
네. 이렇게 나오게 됩니다. x축은 가로, y축은 세로임을 알 수 있습니다.
이번에는 배경 이미지에 대한 위치 설정 입니다. 속성에 대한 요소는 bottom, center, left, right, top 이 있습니다. 각 요소의 뜻은 다음과 같습니다.
background-position: bottom → 이미지가 아래에 위치
background-position: center → 이미지가 중앙에 위치
background-position: left → 이미지가 왼쪽에 위치
background-position: right → 이미지가 오른쪽에 위치
background-position: top → 이미지가 위쪽에 위치
그러면 왼쪽 상단 혹은 오른쪽 하단에 오게 하려면 어떻게 해야 할까요?
이렇게 위치에 대한 요소를 두 번 마크업 하시면 됩니다. right bottom 은 오른쪽 아래라는 뜻이 됩니다. 여기에서는 연이어 다른 위치에 대해서 설명을 하기 위해서 body 본문 영역의 높이값을 1000픽셀로 부여했습니다.
위의 요소의 결과 화면 입니다. 오른쪽 하단에 이미지가 정상적으로 들어왔음을 알 수 있습니다. 방금 본문의 세로 크기를 입력했기 때문에 이렇게 모니터 해상도에 따라 스크롤이 나타날 수 있습니다. 지금 이 세로크기를 왜 지정했느냐면 절대위치를 고정시킬것인지, 스크롤에 따라 변화를 줄 것인지에 대해서 설명드리기 위함입니다. 현재는 스크롤에 따른 위치가 변화되는 상태 입니다.
고정시키기 위해서는 다음의 CSS 요소를 부여할 수 있습니다.
background-attachment: fixed;
이렇게 마크업 하시면 스크롤에 상관없이 늘 고정된 배경 이미지를 확인하실 수 있습니다.
결과 화면 입니다. 보시는 것 처럼 아까는 스크롤이 올라가 있으면 이미지가 일부 잘려서 보이지 않았는데 이번에는 스크롤에 상관 없이 늘 이미지 전체가 오른쪽 하단에 고정되어 있습니다. 보통 화면 해상도에 상관없이 고정된 배경 이미지를 설정할 때 이 속성을 사용하면 됩니다.
그러면 이 모든것을 하나의 태그 요소로 사용할 수 있을까요? 가능합니다. 단 순서를 절대적으로 잘 지켜주셔야 합니다.
background: 색상 url(이미지경로) 반복여부 위치 고정여부;
이 순서를 기억해 주시고, 띄어쓰기에 유념해 주시면 됩니다. 참고로 이미지를 가운데로 오게 하려면 center를 두 번 반복해서 작성하면 되겠지만, 결과는 그렇게 나오진 않을 것 입니다. 이럴때는 위치를 %로 표현 할 수도 있습니다. 0 / 100% 는 왼쪽 하단, 50% / 0 은 가운데 상단, 100% / 50% 는 오른쪽 중앙 입니다. 25%로도 설정할 수 있습니다. 절대위치로 입력하는 것 보다는 오히려 더 편할수도 있습니다. 그러면 완전 정중앙은 어떻게 입력하면 될까요? 50% / 50% 으로 두 번 입력하시면 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
