background

A. 배경이미지의 반복 (background-repeat 속성)
• 속성 : background-repeat

• 값 : repeat, repeat-x, repeat-y, no-repeat, inherit

•기본값 : repeat

• 적용대상 : 모든 요소
이 속성은 요소의 배경 이미지가 반복되는 방향을 지정한다.
이러한 반복의 시작은 background-position 값으로 정한다.
속성 값에 대한 의미는 다음과 같다.

repeat : 수평과 수직으로 반복된다.
repeat-x : 수평으로 반복된다.
repeat-y : 수직으로 반복된다.
no-repeat: 반복하지 않고 한 번만 표시한다.

body { background-image:url('paper.gif'); background-repeat:repeat-y; }

B. 배경이미지의 이동, 고정 (background-attachment 속성)
• 속성 : background-attachment

• 값 : scroll, fixed, inherit

• 기본값 : scroll

• 적용대상 : 모든 요소
이 속성은 배경 이미지가 요소와 함께 스크롤될지 안될지 결정한다. 대부분 body에 적용한다.
속성 값에 대한 의미는 다음과 같다.

scroll : 배경이미지가 문서의 스크롤과 함께 이동한.
fixed : 고정되도록 지정한다. 브라우저 표시영역에 대해서 고정된다.

body {
background-image:url('smiley.gif');
background-repeat:no-repeat; background-attachment:fixed;
}

C. 배경이미지의 초기 위치 (background-position 속성)
• 속성 : background-position

• 값 : 퍼센테이지, 길이, top center bottom, left center right, inherit

• 기본값 : 0% 0%

• 적용대상 : 모든 요소
이 속성은 요소의 배경 이미지의 시작 위치를 지정한다.
이 속성은 배경의 반복이 시작되는 지점이나, 반복되지 않으면 이미지 자체의 위치를 나타낸다. 백분율 값은 그 요소 내부의 저점뿐만 아니라, 원래 이미지 자체의 동일한 지점도 정의한다.
속성 값에 대한 의미는 다음과 같다.

백분율 : ‘백분율(x축) 백분율(y축)’ 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다.
길이 : ‘길이(x축) 길이(y축)’ 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다.
top left, left top : 맨위 왼쪽으로 지정한다. ‘0(%) 0(%)’와 같음.
top, top center, center top : 맨위 중앙으로 지정한다. ’50(%) 0(%)’와 같음.
right top, top right : 맨위 중앙으로 지정한다. ‘100(%) 0(%)’와 같음.
left, left center, center left : 왼쪽 중앙으로 지정한다. ‘0(%) 50(%)’와 같음.
center, center center : 중앙 중앙으로 지정한다. ’50(%) 50(%)’와 같음.
right, right center, center right : 오른쪽 중앙으로 지정한다. ‘100(%) 50(%)’와 같음.
bottom left, left bottom : 바닥 왼쪽으로 지정한다. ‘0(%) 100(%)’와 같음.
bottom, bottom center, center bottom : 바닥 중앙으로 지정한다. ’50(%) 100(%)’와 같음.
bottom right와 right bottom : 바닥 오른쪽으로 지정한다. ‘100(%) 100(%)’와 같음.

body { 
background-image:url('smiley.gif'); 
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

D. 배경관련 속성의 일괄지정 (background 속성)
• 속성 : background

• 값 : background-color, background-image, background-repeat, background-attachment, background-position, inherit
• 기본값 : 화면 표시 장치의 기본 스타일 참조

• 적용대상 : 모든 요소
이 속성은 배경과 관련된 background-color, background-image, background-repeat, background-position, background-attachment, 속성을 한꺼번에 지정할 수 있는 단축 속성이다. 값에는 배경관련 속성의 값을 공백으로 구분하여 복수 지정할 수 있고, 순서에 구애받지 않으며, 일부 생략 가능하다.

body { background: #00ff00 url('smiley.gif') no-repeat fixed center; }

Posted in CSS


Categories

Archives