웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
css 배경이미지 정리
2014.02.13 17:33
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}
위에 스타일을 속성을 사용하여 하나하나 풀어 쓰자면 아래와 같습니다.
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}
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
글쓰기를 클릭하면 띄워지는 테두리 없는 예쁜 팝업 띄우기 core. 1.7.4 [4] | 마음의빈자리 | 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] | 맞장 | 2014.02.15 |
우분투 12.04 LTS Nginx 최신버전 설치하기 [1] | 도라미 | 2014.02.17 |
1.7.4 용 youtube, vimeo, ted 썸네일 적용 document.item.php 수정방법 [9] | 남자인간 | 2014.02.17 |
1.7.4 버전용 한글 lang.xml 파일 [5] | 투씨 | 2014.02.18 |
IEXPLORER 버젼 호환성 강제 맞추기 | davidis | 2014.02.18 |
누리고 쇼핑몰 모바일버전에서 백지화현상 수정하는 팁 [5] | garnecia | 2014.02.19 |
XE 1.7.4 "이메일 주소로 계정 찾기" 오류 해결 방법 | 꿈돌리 | 2014.02.20 |
위젯 게시판 선택시 다중선택하기 ! [2] | 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 |