사진 한장으로 전체배경 만들기
배경을 넣을 때 스타일 시트를 이용해서, 배경 이미지가 반복이 되지 않게하는 방법과 배경 이미지를
고정시키는 방법에 대해서 알아보겠습니다.
우선 아래의 소스를 보세요.
<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>
◈먼저 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: no-repeat; background-position: bottom right; } table
{ background-color: transparent; } td { background-color: transparent; } </STYLE>
본인이 의도하는 이미지주소만 바꿔주시면 됩니다.
현재바탕구름(전체배경)화면소스입니다
<style> body { background-image:url("https://t1.daumcdn.net/cfile/blog/130B5D0F4AB43B8232"); background-attachment: fixed; background-repeat: yes-repeat; background-position: up; } </style>
[전체배경]단풍나들이 여인
<style 배경이미지_primary=""> body { background-image: url(https://t1.daumcdn.net/cfile/cafe/2615C934562A0F772A); background-attachment: fixed; background-color:#ffffff; background-repeat: no-repeat ; background-position: center bottom; background-size: cover; }</style>
위에소스를 드래그복사하시여 본인글 쓰시고 게시글과 어울리는 화면이면 복사한것을 본인글에 소스로
들어가셔서 하단에 붙여넣키하시면 전체화면배경으로 단풍나들이 여인의 화면 적용됩니다.
함 시도해보시길요
.
