웹마스터 팁

background: url(이미지경로) no-repeat fixed center center

위에 스타일을 속성을 사용하여 하나하나 풀어 쓰자면 아래와 같습니다.

BODY {
background-image: url(이미지경로)undefined; //배경 이미지의 경로
background-repeat: no-repeat; //배경 이미지를 반복 제한
background-attachment: fixed; // 배경 이미지를 고정
background-position: center center //배경 이미지의 위치를 지정
}

background-image: url(이미지경로)undefined

위의 속성은 배경 이미지를 보여주기 위해서 경로를 지정 하는것입니다.
url(이미지경로) 이곳에 절대 경로와 상대 경로 모두 가능 합니다.
(./, ../, ../../, http://주소 등등)

background-repeat: no-repeat

배경 이미지의 배열이나 한번 사용 할 것인지 반복 할 것인지를 판단 합니다.
<BODY background=이미지>하면 배경 이미지가 반복 되어 나오지요!! 그러나 위에서 이처럼 스타일로 적용 하면 한번만 나옵니다.
배경에 관한 속성에 보시면 네가지 속성을 사용 할 수 있습니다.

background-repeat (no-repeat/repeat/repeat-x/repeat-y)
no-repeat //배경 이미지 한번만 사용
repeat //배경 이미지가 웹 페이지 전체적으로 반복 사용
repeat-x //배경 이미지가 가로 방향으로만 주~~~욱 나타납니다.
repeat-y //배경 이미지가 세로 방향으로만 주~~~욱 나타납니다.

background-attachment: fixed

<BODY> 태그에서 background를 사용 했다면 태그 속성중에 bgproperties속성과 같이 배경 이미지를 고정 합니다.
background-attachment (fixed:고정/scroll:고정하지 않고 움직임)

background-position: center center

이미지의 위치를 선정 합니다.
위에서 no-repeat 과 fixed를 사용 했기 때문에 브라우저 기준으로 중앙에 위치 됩니다.
위에서 background-repeat (repeat-x/repeat-y) 이 두 속성을 사용 했다면
repeat-x 인 경우에는 수평 정렬 되며 값으로(left/center/right)가 사용 되고
repeat-y 인 경우에는 수직 정렬 되며 값으로(top/center/bottom)이 사용 됩니다.
값은 (%)로 사용 가능 합니다.

오른쪽 상단
BODY {background: url(이미지 경로) no-repeat fixed right top}
오른쪽 중간
BODY {background: url(이미지 경로) no-repeat fixed right center}
오른쪽 하단
BODY {background: url(이미지 경로) no-repeat fixed right bottom}
왼쪽 상단
BODY {background: url(이미지 경로) no-repeat fixed left top}
왼쪽 중간
BODY {background: url(이미지 경로) no-repeat fixed left center}
왼쪽 하단
BODY {background: url(이미지 경로) no-repeat fixed left bottom}
중간 상단
BODY {background: url(이미지 경로) no-repeat fixed center top}
중간 중간(정중앙)
BODY {background: url(이미지 경로) no-repeat fixed center center}
중간 하단
BODY {background: url(이미지 경로) no-repeat fixed center bottom}
제목 글쓴이 날짜
글쓰기를 클릭하면 띄워지는 테두리 없는 예쁜 팝업 띄우기 core. 1.7.4 [4] file 마음의빈자리 2014.02.11
2014년 2월 12일부터 갑자기 사이트(관리자 페이지)가 깨지는 경우. 새하나모 2014.02.12
이메일인증 Error 한방정리 참고해보세요. [4] 애드바이러스 2014.02.12
css 배경이미지 정리 devdevpia 2014.02.13
GNB 메뉴를 쉽게 만드는 jQuery plugin [2] 김개발 2014.02.14
css 가운데정렬 완벽정리! 돼지코구뇽 2014.02.14
"이 페이지 나가기" 경고창이 뜨는 사이트의 경우 [23] 투씨 2014.02.15
카카오스토리 링크 [14] file 맞장 2014.02.15
우분투 12.04 LTS Nginx 최신버전 설치하기 [1] file 도라미 2014.02.17
1.7.4 용 youtube, vimeo, ted 썸네일 적용 document.item.php 수정방법 [9] file 남자인간 2014.02.17
1.7.4 버전용 한글 lang.xml 파일 [5] file 투씨 2014.02.18
IEXPLORER 버젼 호환성 강제 맞추기 davidis 2014.02.18
누리고 쇼핑몰 모바일버전에서 백지화현상 수정하는 팁 [5] garnecia 2014.02.19
XE 1.7.4 "이메일 주소로 계정 찾기" 오류 해결 방법 꿈돌리 2014.02.20
위젯 게시판 선택시 다중선택하기 ! [2] file GomSang 2014.02.21
게시판 목록에서 새창 띄워서 다른 형태 나오게 하기 [3] foret 2014.02.23
게시판 목록의 new 아이콘 바꾸기 [1] foret 2014.02.23
스케치북5 모바일 댓글 작성시 엔터를 쳤을 때 <br /> 코드 뜨는 문제 해결 [7] oryan 2014.02.23
코어 수정 없이 스킨 수정만으로 게시판 목록에 유튜브,비메오 썸네일 출력 [2] foret 2014.02.23
부트스트랩 레이아웃 제작시 메뉴 코딩팁 웹빌드 2014.02.23