css background-position
■ 지난 글에서 이미지를 배경에 삽입하고 'repeat'속성을 설정하는 방법에 대해서도 알아봤는데요.
http://godvow.tistory.com/107 ◀ background-image 속성
■ 이번글에서는 삽입한 이미지가 배경 요소보다 작을 경우 이미지의 위치를 설정하는 방법에 대해서 알아보겠습니다. "background-position" 속성을 이용하는데요. 속성값에는 백분율(%), 길이(px) 또는 위치 키워드 (top, bottom...) 등을 사용할 수 있는데요. 요소 보다 작은 이미지를 준비해서 배경이미지로 삽입해서 각각의 값을 넣어서 바뀌는 위치를 확인해보겠습니다.
▲ 간단하게 <body> 태그에 <div> 태그를 만들고 <style> 속성에서 가로.세로 500px, 배경색을 노란색으로 설정했는데요. 먼저 이대로 출력해서 배경으로 사용할 박스를 확인하겠습니다.
▲ 그냥 이렇게 노란색 박스만 출력되겠죠? 이제 "background-image" 속성을 이용해서 배경을 넣어보겠습니다.
▲ background-image와 repeat 속성을 이용해서 HTML 문서와 같은 폴더에 있는 'bg.png' 파일을 배경이미지로 넣었습니다. 이 부분은 바로 앞 글을 보셨을거라 생각하고 이 정도만 말씀 드려도 되겠죠? 제대로 이미지가 들어갔는지 확인해보겠습니다.
▲ 이제부터 image-position 속성을 이용해서 이미지의 위치를 변경해보겠습니다. 앞에서도 잠깐 언급했듯이 속성값으로 사용할 수 있는 단위는 백분율(%), 길이(px), 키워드 등이 있습니다. 하나씩 적용해볼게요.
▲ 알아보기 쉽게 가로 세로를 50%로 설정하면 중앙으로 오겠죠?
▲ 이렇게 백분율로 표시할 수 있구요.
다음은 길이(px) 값을 넣어서 위치를 지정해보겠습니다.
▲ 가로 30px, 세로 200px 값을 적용해봤습니다.
▲ 그림처럼.... 입력한 길이 값만큼 떨어진 곳에 이미지가 위치하게 됩니다.
마지막으로 속성값에 키워드를 입력해보겠습니다.
▲ 속성값에 right와 bottom값을 넣어서 오른쪽 아래에 위치하도록 설정해봤습니다. 결과를 출력해보고 마무리할게요.
이렇게 해서 background-position 속성에 대해서 알아봤는데요. 정말 간단한 내용이니까 세 가지 형태의 속성값을 이것저것 하면서 위치의 변화를 직접 확인해보셔요. 수고하셨습니다.
