웹마스터 팁

  2. Support
  3. 웹마스터 팁

css 배경이미지 정리

2014.02.13 17:33

devdevpia

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}
이 게시물을
좋아요
목록
태그 쓰기