CSS 배경속성(Background Property)

CSS의 배경 속성은 요소의 배경 효과를 정의하는데 사용됩니다. CSS3에서 추가된 내용은 구형 IE에서는 지원하지 않을 수 있음에 유념하세요.

background

축약형 속성으로 background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image 순서로 작성한다. 몇몇 값을 생략해도 문제없다.

/* background-image background-position [/background-size] repeat-style attachement box background-color */
h1 {background: url('img.gif') 50% /8em repeat-x fixed border-box blue; }

• IE8 이하 버전은 한 요소에 여러개의 배경 이미지 설정을 지원하지 않는다.
• inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

자바스크립트 문법

object.style.background="red url(smiley.gif) top left no-repeat"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

background-attachment

콤마로 구분된 여러 개의 배경 이미지가 스크롤되는 방식을 지정한다.

div {background-attachment: fixed;}

속성값

• scroll : 배경이 요소에 고정되어 문서와 함께 스크롤된다. 이 값이 기본값이다.
• fixed : 뷰 포트에 따라 고정된다.
• local : 요소의 콘텐츠 위치를 상속받아 콘텐츠와 함께 스크롤된다.

background-attachment 데모 보기

자바스크립트 문법

object.style.backgroundAttachment="fixed"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

background-clip

CSS3에 추가된 속성으로 테두리 내의 배경에 대한 확장 속성을 정의한다.

h1 {background-clip: content-box;}

속성값

• border-box : 테두리를 확장한다.
• padding-box : 테두리를 확장하지 않는다.
• content-box : 콘텐츠 영역만을 확장한다.

background-clip 속성에 padding-box 값을 지정하면 아래 그림처럼 jQuery의 lightbox 스크립트처럼 투명한 효과를 적용할 수 있다.

background-clip 데모보기

자바스크립트 문법

object.style.backgroundClip="padding-box"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9	FF4	SF5, iOS5	CH4, An3	O11

background-color

배경 색상을 지정하며 기본값은 transparent 이다.

h1 {background-color: #f00;}

속성값

• color값 : 16진수의 컬러 값(#ffffff) 혹은 rgb 컬러 값(255,255,255), 키워드(white)
• transparent : 기본값으로 투명이다.
• inherit : 부모 요소로부터 값을 상속 받는다.

background-color 데모 보기

자바스크립트 데모

object.style.backgroundColor="#00FF00"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

background-image

배경에 사용될 이미지를 지정한다.

body {
  background: url(img_tree.gif) top left no-repeat, 
  background: url(img_flwr.gif) bottom left no-repeat,     
}

h1 {background-image: url(logo.png) no-repeat;}

• 박스 배경은 여러 개의 레이어(멀티 배경)를 가질 수 있다.
• background-image 속성에 콤마로 구분하여 여러 개의 레이어를 지정할 수 있다.
• none 값을 포함한 모든 값은 하나의 레이어를 의미한다.
• 각 이미지 레이어는 크기 및 위치를 조정할 수 있으며, 각 배경의 속성 값에 따라 반복적으로 나타날 수 있다.
• 첫 번째로 지정한 이미지가 사용자에게 가깝게 보여진다.

멀티 배경 이미지 데모 보기

자바스크립트 문법

object.style.backgroundImage="url(sky.png)"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9	FF3.6	SF3, iOS3	CH8, An2	O10.5

background-origin

CSS3에 추가된 속성으로 박스를 기준으로 배경 이미지의 상대 위치를 지정한다.

div {
  background-image: url(img_flwr.gif);
  background-origin: content-box;
}

속성값

• border-box : 테두리를 확장한다.
• padding-box : 테두리를 확장하지 않는다.
• content-box : 콘텐츠 영역만을 확장한다.

background-attachment 속성값이 fixed로 지정되어 있으면 이 속성이 적용되지 않는다.

background-origin 데모 보기

자바스크립트 문법

object.style.backgroundOrigin="border-box"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9	FF4	SF5, iOS5	CH4, An3	O10.6

background-position

배경 이미지의 시작 위치를 지정한다.

h1 {background-image: url(sky.png) left top;}
h2 {background-position: 15px 20px;}
h3 {background-image: url(land.png) center top;}

• 키워드를 하나만 지정하면 두 번째 값은 center가 된다.
• 기본값은 왼쪽 상단, 즉 0 0 이다. 퍼센트 값을 이용하거나 혹은 top left 키워드를 이용할 수 있다.
• 퍼센트 값과 위치 값은 혼합해서 사용할 수 있다.
• 퍼센트 값은 배경의 위치 영역의 크기에서 배경 이미지의 크기를 뺀 값을 의미한다.

속성값

• left top / left center / left bottom / right top / right center / right bottom / center top / center center / center bottom : 키워드 속성값이고 하나만 지정하면 두 번째 값은 center가 된다.
• x% y% : 퍼센트 부호(%)가 뒤에 오는 정수를 지정한다.
• xpos ypos : px를 포함해서 in, cm, mm, em, ex, pt, pc등을 사용할 수 있다.
• inherit : 부모 요소로부터 값을 상속 받는다.

background-position 데모 보기

자바스크립트 문법

object.style.backgroundPosition="center"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

background-size

CSS3에 추가된 속성으로 배경의 위치 영역 내의 원래 크기를 저장하고 속성값에 따라 영역에 크기를 맞춘다.

div {background-size: 80px 60px;}
h1 {background-size: cover;}

속성값

• width height : 첫 번째 값은 width 값이며, 두 번째 값은 height 값이다. width와 height 속성에 사용할 수 있는 값은 auto, px, % 이다. 두 번째 값을 생략하면 auto 값이 적용된다.
• cover : 가능한한 배경 이미지 배율을 크게 하여 배경 이미지를 배경 영역에 포함시킨다. 배경 이미지의 일부분은 배경 위치 영역을 벗어날 수 있다.
• contain : content 영역 안쪽에 width와 height 둘다 가능한한 가장 큰 사이즈로 배경 이미지 크기를 조정한다.

background-size 데모 보기

자바스크립트 문법

object.style.backgroundSize="60px 80px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9+	지원	지원	지원	지원

background-repeat

배경의 반복 패턴을 지정한다.

body {background-repeat: space;}

속성값

• repeat : 배경이 수평 및 수직 방향으로 반복된다.
• repeat-x : 배경이 수평 방향으로만 반복된다.
• repeat-y : 배경이 수직 방향으로만 반복된다.
• no-repeat : 배경이 반복되지 않는다.
• round : 배경 영역을 채우기 위해 필요한 만큼만 반복된다. 이미지의 반복으로 배경 영역을 채우지 못하면 이미지의 크기가 조정된다.
• space : 이미지 클리핑 없이 배경의 위치 영역을 채우기 위해 필요한 만큼만 반복되며, 영역을 채우기 위해 이미지 사이의 공간이 벌어진다. 첫 번째와 마지막 이미지는 영역의 가장자리에 나타난다.
• inherit : 부모 요소로부터 값을 상속 받는다.

background-repeat 데모 보기

자바스크립트 문법

object.style.backgroundRepeat="repeat-y"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.