☞ background-position
배경 이미지의 위치를 조절해주는 속성입니다. 속성값은 키워드식 , 픽셀방식 , 퍼센트(%) 방식이 있습니다.
| 키워드 방식 |
body { background-position: top left;
} |
| 픽셀방식 |
body { background-position: 40px 50px
} |
| 퍼센트 방식 |
body { background-position: 40% 50% } |
키워드 방식의 경우 top , bottom , left , right ,
center 등을 사용할 수 있다. 위에 보기처럼 top left
를 사용한 경우 브라우져 상단 왼쪽에
배경이미지를 위치시키는 것을 의미한다. 가운데
쉼표(,)가 없다는 것에 주의 하자. 픽셀과
퍼센트방식은 브라우저의 왼쪽 상단
원점으로부터 해당 수치만큼 x측 y측으로 위치를
지정해주는 것이다.
<style type="text/css">
<!--
body { background-image:
url(http://tagmania.net/img/gil2.gif); background-repeat: no-repeat; background-position: bottom right ; }
-->
</style>
<body>
어때요? 길동이 아저씨네요^^<br>
지금 사용한 방식은 키워드 방식입니다.<br>
여러분들이 픽셀방식과 퍼센트 방식으로 <br>
바꿔가면서 연습해보세요.
</body> |
위의 예제의 경우 배경이미지를 no-repeat 로
설정해준 다음 background-poition을 키워드 방식으로
해준 것입니다. 여러분들이 픽셀방식과 퍼센트
방식으로 바꿔 가면서 연습을 해보세요. 제가
백번을 말해도 한번 직접 해보는 것이 더 이해가
빠르답니다.
☞ background
지금까지 background 에 대한 속성들을
배워왔습니다.. color , image , repeat , position 을
배웠는데....각각의 속성을 적어줄때 background ☜이
단어를 여러번 써야 하는 불편함이 있습니다.(타수도
잘 안 나오는데..영타로 꼬박꼬박 칠려고 하니
짜증나죠^^) 다음과 같이 하면 단 한번만 쓰고
각각의 속성을 표현해 줄 수 있습니다.
|
body {
background : url (이미지주소) 30% 50% repeat-x
fixed white } |
background 를 맨 처음에 한번 적어준
다음 각각의 속성값을 적어주면 되죠.^^ 위에
속성들의 순서를 보면 처음에 이미지주소 ,
이미지 위치 , 이미지 반복 , 배경이미지고정 ,
배경색 이 되겠죠?^^
어때요? 쉽죠? ^^
|
