06.23(background)

background

 

① background-color

② background-image

③ background-repeat

④ background-position

⑤ background-attachment

---

background 속성

 

속성	설명
background	모든 background 속성을 이용한 스타일을 한 줄에 설정
background-color	HTML 요소의 배경색을 설정
background-image	HTML 요소의 배경 이미지를 설정
background-repeat	설정된 배경 이미지의 반복 유무를 설정
background-position	반복되지 않는 배경 이미지의 상대 위치를 설정
background-attachment	배경 이미지를 스크롤과는 무관하게 해당 위치에 고정

---

background-color

 

HTML 요소의 배경색(background color)을 설정

 

background-image

 

HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정

설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타남

 

background-repeat

 

배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타남

repeat-x	수평 반복
repeat-y	수직 반복
no-repeat	반복되지 않고 한 번만

 

background-position

 

반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정

 

사용가능한 키워드의 조합

1. left top

2. left center

3. left bottom

4. right top

5. right center

6. right bottom

7. center top

8. center center

9. center bottom

또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있음

이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 됨

 

background-attachment

 

위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있음

이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않음