CSS3 배경 스타일

CSS3 배경 스타일

 

CSS 배경 스타일 속성

속성	설명	값
background-color	홈페이지의 배경색을 지정함	색상 이름 입력 RRGGBB 코드값 입력
background-image	배경 이미지를 지정함	이미지의 URL 입력 none
background-repeat	배경 이미지의 반복 여부를 지정함	repeat repeat-x repeat-y no-repeat
background-position	삽입한 배경 이미지의 위치를 지정함	수치 퍼센트(%) top center bottom left right
background-attachment	삽입한 배경 이미지의 스크롤에 따른 움직임 여부를 지정함	fixed scroll
background	배경 이미지와 관련된 속성을 지정함	background-color 값 입력 background-image 값 입력 background-repeat 값 입력 background-attachment 값 입력 background-position 값 입력

 

CSS 배경 스타일 형식

CSS2 부터 있었던 background 속성에 이미지의 주소, 위치, 반복 여부의 순서로 지정해 줍니다.

 

배경 이미지의 위치 조절

 

하나의 영역을 박스라고 표현하면 박스에는 테두리 선을 나타내는 Bording 부분이 있고, 테두리 선 밖의 여백을 나타내는 Margin 영역이 존재하며, 테두리 선과 박스 안 내용 사이의 여백을 나타내는 Padding 영역이 있습니다.

배경 이미지를 박스 안에 넣고자 할 때는 Bording 부분과 Padding 부분을 기준으로 위치를 조절해 주어야 합니다.

 

CSS3에 추가된 배경 이미지 관련 속성

속성	설명
background-clip	배경 이미지의 위치를 조절함
background-origin	배경 이미지의 기준 위치를 지정함
background-size	배경 이미지의 크기를 지정함

 

① background-clip 속성

 

박스 안의 각 부분을 기준으로 배경 이미지의 위치를 조절하는 역할을 수행합니다.

background-clip 속성의 값

값	설명
border-box	기본 값이고, 박스의 테두리 너비만큼 배경 이미지를 같이 표시합니다.
padding-box	박스의 테두리를 제외한 영역에 배경 이미지를 표시합니다.
content-box	박스의 패팅을 제외한 영역에 배경 이미지를 표시합니다.

background-clip 의 속성값을 border-box 로 지정

background-clip 의 속성값을 padding-box 로 지정

background-clip 의 속성값을 content-box 로 지정

 

② background-origin 속성

 

배경 이미지의 기준 위치를 지정하는 역할을 수행합니다.

 

background-origin 속성의 값

값	설명
border-box	테두리의 바깥쪽 라인 영역을 기준으로 배경 이미지를 표시합니다.
padding-box	기본 값이며, 패딩 영역부터 배경 이미지를 표시합니다.
content-box	박스의 패딩 영역을 제외한 영역부터 배경 이미지를 표시합니다.

background-origin 의 속성값을 border-box 로 지정

background-origin 의 속성값을 padding-box 로 지정

background-origin 의 속성값을 content-box 로 지정

 

③ background-size 속성

 

배경 이미지의 크기를 변경하여 지정하는 역할을 수행합니다.

background-size 속성의 값

값	설명
auto	기본값이고, 이미지의 원래 크기로 출력합니다.
cover	이미지의 너비와 높이 중 길이가 짧은 곳을 기준으로 영역을 채워줍니다.
contain	이미지의 너비와 높이 중 길이가 더 긴 곳을 기준으로 영역을 채워줍니다.

background-size 의 속성값을 auto 로 지정

background-size 의 속성값을 cover 로 지정

background-size 의 속성값을 contain 으로 지정