웹마스터 팁
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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
XpressEngine 공식 매뉴얼(한글 파일) #1
[9]
 | 자이제로 | 2008.11.21 |
| 펌방지하기(펌방지해제우회) [6] | *이종민* | 2008.11.21 |
|
회원 관리 리스트에 생일/설명/활동량 추가하기
[16]
| 老姜君 | 2008.11.21 |
|
새글/업데이트/이미지/동영상/첨부파일 아이콘 없애기
[18]
| 老姜君 | 2008.11.21 |
| 히든프레임 사랑비BGM 컨트롤하기(수정완료) [6] | Pw-NET | 2008.11.16 |
|
약관 2개 만들기
[3]
| WXPCM | 2008.11.15 |
| IIS 6.0에 rewrite mod 적용하기 [5] | 천애소원 | 2008.11.14 |
| 제로보드XE XML파일 표준화 [2] | BlueGATE | 2008.11.13 |
| 제로보드XE 가로 스크롤 문제 해결 방법 [7] | digitalist | 2008.11.12 |
| 레이아웃에 위젯 넣을때 위젯 사이즈 조절 [4] | mojo9 | 2008.11.07 |
| 일반 페이지에 로그인(세션) 정보 활용하기 [13] | noirzo | 2008.11.07 |
|
제한된 웹사이트
[1]
| 마호로 | 2008.11.05 |
| 이미지 리사이즈가 적용 안될때 [1] | 개돌 | 2008.11.03 |
|
라이트박스(facebox) 적용하기
[7]
| 퍼플F | 2008.11.02 |
| FTP프로그램을 이용하지 않고 업로드 하기 [8] | 싱하형 | 2008.10.31 |
| 외국에서 접속시 로그인 않되는문제 [1] | minams | 2008.10.30 |
| 윈도우즈에서 운영시 메일 발송 문제 해결 팁 [4] | ㅅnㅁiㄱlㅍㅡㄴㅁㅡㄹ | 2008.10.30 |
|
플래시 BGM 음악 제로보드에 넣는 방법
| 푸른커튼 | 2008.10.29 |
|
초간단 폼메일...소스를 보시면 알거에요.. 수정하셔서 사용해보세요
[5]
| 코리아프럼 | 2008.10.28 |
| 운영자, 특정레벨이하 사진(이미지) 우클릭 금지 [7] | S K Y | 2008.10.27 |