8-3. CSS 속성 : 배경{background-color / -image / -repeat / -attachment / -position}

8-3. CSS 속성 : 배경

 

 가. background 관련 속성

 

  - 요소의 배경에 관련된 속성

  - 배경과 관련하여 색상, 이미지 및 이미지에 대한 반복, 위치, 스크롤에 따른 위치를 설정

 

 나. background 관련 속성의 종류

  

  ■ background-color : 배경 색상

  ■ background-image : 배경 이미지

  ■ background-repeat : 배경 이미지 반복

  ■ background-attachment : 배경 이미지 스크롤에 따른 위치

  ■ background-position : 배경 이미지 위치

 

   1) background-color

 

     - 속성값은 Color 속성값 적용방식과 동일

     - 단, 선택자가 div 요소인 경우 div는 블럭요소이기에 내용을 포함한 해당 줄에 대한 전체 배경 색상 적용

     - 반면, 선택자가 span 요소인 경우 span은 인라인요소이기에 내용에 해당하는 배경만 색상 적용

     - 기본값 : 투명(transparent)

 

1  div{background-color: red;}        2  span{background-color: red;}

 

   2-1) background-image

 

     - 요소의 배경으로 사용할 이미지의 경로를 지정

     - 기본값 : 없음(none)

 

     ▣ 속성값 : url 

     - url 입력 후, 소괄호 내에 이미지의 절대경로 또는 상대경로 입력

    

1  div{background-image: url(https://www.naver.com/cssref/img_tree.gif);}

 

   2-2) background-repeat

 

     - 요소의 배경 이미지의 반복 여부와 관련된 내용을 지정

     - 기본적으로 x, y축으로 반복되어 표현 

     - 기본값 : 반복(repeat)

 

     ▣ 속성값 : repeat

     - x, y축 방향으로 반복

 

     ▣ 속성값 : repeat-x

     - x축(가로한줄) 방향으로만 반복

 

     ▣ 속성값 : repeat-y

     - y축(세로한줄) 방향으로만 반복

 

     ▣ 속성값 : no-repeat

     - 이미지 반복없이, 이미지 1개만 표현

    

1  div{background-repeat: repeat;}  2  div{background-repeat: repeat-x;}  3  div{background-repeat: repeat-y;}  4  div{background-repeat: no-repeat;}

 

 2-3) background-attachment

 

     - 화면 스크롤에 따른 배경 이미지 움직임 여부를 지정

     - 기본값 : 스크롤과 상관없이 이미지는 해당 위치에 고정(scroll)

 

     ▣ 속성값 : scroll

     - 배경 이미지 자체 위치를 기준으로 고정되어 스크롤과 함께 움직이지 않음

 

     ▣ 속성값 : fixed

     - 배경 이미지는 뷰포트(사용자가 시각적으로 볼 수 있는 웹페이지 영역)를 기준으로 고정되어,

       사용자가 시각적으로 보이는 위치에 계속 노출됨

 

1  div{background-attachment: scroll;}  2  div{background-attachment: fixed;}

 

 2-4) background-position

 

     - 요소의 배경 이미지의 위치를 지정

     - 각 x축, y축으로부터의 위치를 지정할 수 있음

     - 속성값의 선언 순서는 x축, y축 순서임

     - 기본값은 x, y축으로부터 각각 0%로, 값이 지정안되면 중앙에 위치함

     - 만약, 어느 한 축의 값만 지정되면 나머지 한 축은 중앙값(center)으로 적용됨

     - 기본값 : 0% 0%

 

     ▣ 속성값 : %

     - 각 축의 기준으로부터 %만큼 떨어진 지점에 위치

 

     ▣ 속성값 : px

    - 각 축의 기준으로부터 px만큼 떨어진 지점에 위치

 

     ▣ 속성값 : left / right / top / bottom / center

     - left, right는 가로줄에 해당하는 x축의 키워드

     - top, bottom은 세로줄에 해당하는 y축의 키워드

     - center는 x, y축의 공통 키워드 

     

1  div{background-position: 100% 200%;}  2  div{background-position: 10px 20px;}  3  div{background-position: left top;}

 

 다. background 속성의 축약

 

  - 위 여러 background 관련 속성을 축약하여 하나의 코드로 입력할 수 있음

  - 단, 축약시 선언 순서에 맞춰야 함 

 

[background 축약형 선언순서]  1 background: [color 값] [image 값] [repeat 값] [attachment 값] [position 값] -------------------------------------------------------------------------------------------------------------------------------  [코드예시]  1 div{background: red url(https://www.naver.com/cssref/img_tree.gif) no-repeat fixed 100% 200%}