background 속성

 

 

 

오늘은 간혹 헛갈리는 background(백그라운드) 속성에 대해서 정리를 해볼까 합니다.

먼저 백그라운드를 컨트롤 할 수 있는 속성에는 총 6가지가 있습니다.

background-color /*색상지정*/
background-image /*이미지 경로지정*/
background-size /*이미지 크기지정*/
background-repeat /*이미지 반복지정*/
background-position /*이미지 위치지정*/
background-attachment /*스크롤 지정*/

 

 

 

background 한줄 작성법

background:red url('이미지경로')no-repeat scroll 0px 20px/100px 100px;

 

 

background-color

background-color:#ffffff; /*색상값*/
background-color:rgb(0,0,0); /*rgb 색상값*/
background-color:rgba(0,0,0,1); /*투명도 적용*/
background-color:red; /*색상 이름*/

 

background-image

background-image:url('파일경로'); /*절대좌표, 상대좌표 모두 가능*/

 

background-size

background-size:auto; /*기본 크기*/
background-size:100px 150px; /*가로100px 세로150px 사이즈로*/
background-size:cover; /*부모요소 가로크기 맞춰서*/
background-size:contain; /*부모요소 세로크기 맞춰서*/

 

background-repeat

background-repeat:no-repeat; /*반복하지 않음*/
background-repeat:repeat; /*기본값으로 배경이미지를 모두 반복*/
background-repeat:repeat-x; /*x축(가로) 기준으로 반복*/
background-repeat:repeat-y; /*y축(세로) 기준으로 반복*/

 

background-position

background-position:10px 20px; /*가로10px 세로20px 에 지정*/
background-position:left top; /*왼쪽 상단에 지정*/
background-position:20% bottom; /*왼쪽 20% 우측 하단에 지정*/

 

 

background-attachment

background-attachment:fix; /*스크롤바 움직여도 배경은 고정*/
background-attachment:scroll; /*background-attachment 기본값이며 스크롤바 움직임에 따라 배경이미지 위치가 변경*/

 

 

background 중첩

background 중첩은 ie8 이하에서 작동이 안되니 사용할때 주의 부탁드립니다.

background-image:url('이미지경로'), url('이미지경로');