전체배경 직접 만드는 방법 (소스)

소나기 전체배경 해놓은 것 몇개

쓰실 분 소스복사 하고 쓰세요.

 

<STYLE> body { background-image:url( https://t1.daumcdn.net/cfile/cafe/2623DE375509227615
background-repeat: repeat; background-position: top center;} table
{ background-color: transparent; } td { background-color: transparent; }</STYLE>

 

 

<STYLE> body { background-image:url( https://t1.daumcdn.net/cfile/cafe/214C1F3F550923C707
background-repeat: repeat; background-position: top center;} table
{ background-color: transparent; } td { background-color: transparent; }</STYLE>

 

 

 

<STYLE> body { background-image:url( https://t1.daumcdn.net/cfile/cafe/27047C44550924972B
background-repeat: repeat; background-position: top center;} table
{ background-color: transparent; } td { background-color: transparent; }</STYLE>

 

<STYLE> body { background-image:url( https://t1.daumcdn.net/cfile/cafe/265BE1415509254D23
background-repeat: repeat; background-position: top center;} table
{ background-color: transparent; } td { background-color: transparent; }</STYLE>

 

====================================================================================================================

 

전체배경 직접 만드는 방법

 

 

가운데 위 - 좌우 여백 반복 적용 (제가 쓰는 것)

 

소스

<STYLE> body { background-image:url(이미지 주소); background-attachment: fixed;
background-repeat: repeat; background-position: top center;} table
{ background-color: transparent; } td { background-color: transparent; }</STYLE>

 

-----------------------------------------------------------------------------------------

<style>
body {background-image:url("이미지주소");
background-attachment: fixed;
background-repeat: repeat;
background-position: bottom right;}
table { background-color: transparent; }
td { background-color: transparent; }
</style>

image:url("이미지주소") -> 배경으로 사용할 이미지를 불러옵니다.

attachment: fixed -->배경 이미지를 고정시킵니다. 스크롤바를 움직여도 움직이지 않습니다.
(스크롤함에 따라 움직이려면 이 옵션을 지워주세요.)

repeat: repeat -->배경 이미지를 반복해서 적용합니다.
일반적인 크기인 1024-768 사이즈보다 작을 경우 반복됩니다.
(반복하지 않으려면 no-repeat 적용)

position: bottom right -->이미지를 아래 오른쪽에 위치시킵니다.
(top,bottom,center,left,right를 사용, 저는 top center 사용)

나머지 부분은 바탕을 투명하게 적용하는 옵션입니다.

◈먼저 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; 는 출력할 이미지를 화면에 고정시킨다는 뜻입니다.
즉 스크롤바를 내려도 배경그림이 따라서 화면 아래로 내려가지 않고
고정된 채로 있는걸 말하는 겁니다.
이미지를 고정시키지 않으시려면 이 부분을 삭제하시면 됩니다.

 

너무 어렵게 생각하지 마시고 시간날때 천천히 해 보세요.

 

1. 사진 선택

2. 픽셀 편집 조절 - 저장 (1280 X 1024, 1280 X 720...)

3. 글쓰기 - HTML 선택 - 소스 복사 붙이기

4. 소스에서 '이미지 주소' 에 선택 사진의 주소 붙여넣기

(이때 주소가 들어간 후 이미지 주소 라는 글자는 없애야 함)

5. HTML 해제 - 글쓰기 완료