화면이 중앙에..
<STYLE> body { background-image:url(" 이미지 주소 "); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; } table { background-color: transparent; } td { background-color: transparent; }</STYLE>
(응용소스)
<STYLE> body { background-image:url(" "); background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; } table { background-color: transparent; } td { background-color: transparent; }</STYLE>
화면 오른쪽에..
<STYLE> body { background-image:url(" 이미지 주소 "); background-attachment: fixed; background-repeat: no-repeat; background-position: right; } table { background-color: transparent; } td { background-color: transparent; }</STYLE>
(응용소스)
<STYLE> body { background-image:url(" "); background-attachment: fixed; background-repeat: no-repeat; background-position: right; } table { background-color: transparent; } td { background-color: transparent; }</STYLE>
사진 한 장으로 전체배경 만들기|
배경을 넣을 때 스타일 시트를 이용해서,
배경 이미지가 반복이 되지 않게하는 방법과 배경 이미지를 고정시키는 방법에 대해서 알아보겠습니다.
우선 아래의 소스를 보세요.
<style> body { background-image: url(주소);
background-attachment: fixed; background-color:#ffffff;
background-repeat: no-repeat ; background-position:
center bottom; background-size: cover; }</style>
◈먼저 background-image:url(이미지 주소); 는 출력시킬이미지를 불러오는 태그입니다.
이미지 주소란에 출력하고 싶으신 이미지 주소를 넣으시면 됩니다.
◈background-repeat:no-repeat;
는 출력시킬 이미지를 반복해서 연속적으로 출력시키지 않는다는 뜻입니다.
앞에서도 언급했듯이 일반적인 배경 화면 깔기 태그를 쓰면 이미지가 전체 화면보다 작을 경우,
이미지가 반복적으로 출력돼서 화면을 다 채우게 되는데, 이런 반복을 원하시지 않을 때에 이 태그를 사용하시면 됩니다.
repeat-x; 로 지정하면 이미지가 x방향(가로)으로만 반복되고,
repeat-y; 로 지정하면 이미지가 y방향(세로)으로만 반복됩니다.
◈background-position:bottom right;
이 경우는 이미지를 bottom right, 즉 오른쪽 아래에 위치시킨다는 뜻입니다.
이렇게 지정해두면 어떤 해상도라도 이미지는 항상 오른쪽 아래에 일정하게 출력됩니다.
여기서 명령어는 top, bottom, left, right, center 등을 사용합니다.
이 명령어들을 사용하실 때는,
top left(left top), top right(right top), bottom left(left bottom), bottom right(right bottom)...
이런 식으로 두개씩 묶어서 사용합니다.
예를 들어서 top left라고 지정하시면 이미지가 왼쪽 윗부분에 위치하겠지요.
이렇게 단어로 위치를 지정해주는 방법외에 픽셀(수치), 퍼센트(%)로 지정해 주는 방법도 있습니다
예를 들어 픽셀은 background-position: 40px 100px; , 퍼센트는 background-position: 50% 50%;
(이 경우는 배경 이미지가 화면 정중앙에 위치하게 됩니다.) 이런 식으로 지정해줍니다.
즉 픽셀의 경우는 적당한 수치를, 퍼센트의 경우는 적당한 비율을 넣어서 배경 이미지를 의도하는 지점에 위치시키는 겁니다.
◈background-attachment:fixed;
는 출력할 이미지를 화면에 고정시킨다는 뜻입니다.
즉 스크롤바를 내려도 배경그림이 따라서 화면 아래로 내려가지 않고 고정된 채로 있는걸 말하는 겁니다.
이미지를 고정시키지 않으시려면 이 부분을 삭제하시면 됩니다.
▒ 소스입니다 ▒
<style>
body { background-image:url("배경그림주소");background-attachment: fixed;
background-repeat: yes-repeat;
background-position: up; }
table { background-color: transparent; } td
{ background-color: transparent; }
</style>
▒ 설명 ▒
배경그림주소 라는 곳에는 배경그림주소를 넣어 주시면 됩니다.
배경을 포토샵이나,알씨꾸미기,와우이미지에디터,포토스케이프등으로 만들어 주세요.
기본 사이즈: 1024-768이나 이보다 더 작은 이미지를 넣어줘도 됩니다.
<*STYLE> body { background-image:url("이미지주소 넣는 곳")
;background-attachment: fixed;
background-repeat: yes-repeat; background-position: up; }
table { background-color: transparent; }
td { background-color: transparent; }<\*\/STYLE>
<*STYLE> <=== * 표만 지우시고 이미지 주소 넣으시면 전체배경 입니다
<STYLE> body { background-image:url( " "); background-attachment:
fixed; background-repeat: no-repeat; background-position: bottom right; }
table { background-color: transparent; } td
{ background-color: transparent; } </STYLE>
♣우선 위에 소스를 마우스로 드래그한다음
마우스우측 클릭하면 복사가 나옵니다
복사후 올리고자하는 방에가서 글쓰기 클릭하여 우측상단에 HTML 체크 합니다.
그 다음에 글쓰기 칸에 마우스 우측을 클릭하면 붙혀넣기가 나옵니다.
♣클릭
1. 다음 HTML 체크를 푸세요...그럼 아무것두 안보입니다...그대로 나둔뒤에,
2. 위에 보면 '사진'을 클릭하셔서 원하시는 그림이나 사진을 불러오셔요...
3. 그럼 원하시는 그림이나 사진이 들어옵니다.
4. 고것을 오른쪽 마우스로 누르면 속성이 보여요.
5. 속성을 누르면 url 주소가 나와유...그것을 마우스로 드래그한다음 마우스 우측 클릭 복사 "확인" 하구요
6. 다시 요 위에 HTML로 체크를 하신다음에 태그명령소스태그안에 (붙혀넣기) 하신다음
7. 그림 소스는 <STYLE>전까지 삭제를 하셔야 이중삼중으로 안나옵니다.
8. HTML 체크를 해제 하시면 완성끝입니다.(다음 카페에서 모셔온글임)
9. 싸이즈는 피시 싸이즈가 적당합니다.(1024~768)
완성작 소스올리기.
1.수정들어가서 <HTML>체크하면 소스가 나옵니다.
마우스로 드래그한후 마우스 우측클릭 복사후 수정하시고
작성글 보기 클릭 하여 텍스트창 (댓글란)에 마우스클릭 후 우측마우스로 붙혀넣기 ..끝