background 속성

정의

background 속성은 모든 background 속성들을 한번에 선언할 수 있는 축약속성.
background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, background-image 들을 한꺼번에 선언할 수 있으며,
{background:#ff0000 url(bg.gif);} 처럼 한 개 또는 그 이상을 제외하고 사용해도 무관.

기본값

개별 속성값을 참고.

브라우저 지원 :

         
구문
{background:color position size repeat origin clip attachment image;}
설정 속성
값 설명 값속성 속성설명
background-color 배경 색상을 지정 transparent transparent : 투명도
color : 배경색
inherit : 부모 요소의 값을 상속하도록 지정
background-position 배경 위치를 지정 top left (0% 0%) : 맨위 왼쪽 x% y% : %단위로 위치 지정
xpos ypos : cm단위로 위지 지정
top left (0% 0%) : 맨위 왼쪽
top center (50% 0%) : 맨위 중앙
right top (10% 0%) : 맨위 오른쪽
left center (0% 50%) : 왼쪽 중앙
center center (50% 50%) : 중앙 중앙
right center (100% 50%) : 오른쪽 중앙
bottom left (0% 100%) : 바닥 왼쪽
bottom center (50% 100%) : 바닥 중앙
bottom right (100% 100%) : 바닥 오른쪽
inherit : 부모 요소의 값을 상속하도록 지정
background-repeat 배경의 반복 여부를 지정 repeat repeat : 이미지는 수평과 수직적으로 반복
repeat-x : 이미지는 수평적으로 만 반복
repeat-y : 이미지는 수직적으로 만 반복
no-repeat : 이미지는 반복하지 않고 한개의 이미지 만 나타남
inherit : 부모 요소의 값을 상속하도록 지정
background-attachment 배경의 고정 여부를 지정 scroll scroll : 스크롤 하도록 지정
fixed : 고정되도록 지정
local : 요소의 내용과 함께 배경 스크롤
background-image 배경 이미지를 설정하는 속성 none none : 이미지 사용하지 않음
url('url') : 이미지 경로 지정
inherit : 부모 요소의 값을 상속하도록 지정