CSS3 backgrond module example

W3C CSS Backgrounds and Borders Module Level 3(working draft) 중에서 배경에 관련된 속성들과 값에 대한 예제 코드입니다. 브라우저 지원 현황은 PPK의 Browser support chart를 확인해 보세요. 제조사 접두사(vendor prefix)가 적용되지 않아서 실제 구현 여부와 차이가 있습니다.

background-color

p {
	background-color: #0d0;
}

background-color: #0d0;

background-image

layering, vader on top

p {
	background-image: url(Vader.png), url(pattern.png), url(snail.jpg);
}

layering, pattern on top

p {
	background-image: url(pattern.png), url(Vader.png), url(snail.jpg);
}

background-repeat

repeat(default)

p {
	background-image: url(R2D2.png);
}

repeat-x

p {
	background-image: url(R2D2.png);
	background-repeat: repeat-x;
}

repeat-y

p {
	background-image: url(R2D2.png);
	background-repeat: repeat-y;
}

space, 179px height

p {
	background-image: url(R2D2.png);
	background-repeat: space;
	height: 179px;
}

round, 209px height

p {
	background-image: url(R2D2.png);
	background-repeat: round;
	height: 209px;
}

round, 210px height

p {
	background-image: url(R2D2.png);
	background-repeat: round;
	height: 210px;
}

no-repeat

p {
	background-image: url(R2D2.png);
	background-repeat: no-repeat;
}

background-attachment

fixed

p {
	background-image: url(R2D2.png);
	background-attachment: fixed;
}

R2D2

local

p {
	background-image: url(R2D2.png);
	background-attachment: local;
}

R2D2

scroll

p {
	background-image: url(R2D2.png);
	background-attachment: scroll;
}

R2D2

background-position

top

p {
	background-position: top;
}

right

p {
	background-position: right;
}

bottom

p {
	background-position: bottom;
}

left

p {
	background-position: left;
}

center

p {
	background-position: center;
}

right top

p {
	background-position: right top;
}

right bottom

p {
	background-position: right bottom;
}

left bottom

p {
	background-position: left bottom;
}

left top

p {
	background-position: left top;
}

0%

p {
	background-position: 0%;
}

50%

p {
	background-position: 50%;
}

100%

p {
	background-position: 100%;
}

0% 100%

p {
	background-position: 0% 100%;
}

50% 100%

p {
	background-position: 50% 100%;
}

100% 100%

p {
	background-position: 100% 100%;
}

right 16px bottom 16px

p {
	background-position: right 16px bottom 16px;
}

16px bottom 16px (syntax error)

p {
	background-position: 16px bottom 16px;
}

right bottom 16px

p {
	background-position: right bottom 16px;
}

right 16px bottom

p {
	background-position: right 16px bottom;
}

background-clip

border-box

p {
	padding: 16px;
	border: 16px solid transparent;
	background-clip: border-box;
}

TEXT

padding-box

p {
	padding: 16px;
	border: 16px solid transparent;
	background-clip: padding-box;
}

TEXT

content-box

p {
	padding: 16px;
	border: 16px solid transparent;
	background-clip: content-box;
}

TEXT

background-origin

padding-box

p {
	padding-left: 60px;
	border-left: 60px solid transparent;
	background-origin: padding-box;
}

TEXT

border-box

p {
	padding-left: 60px;
	border-left: 60px solid transparent;
	background-origin: border-box;
}

TEXT

content-box

p {
	padding-left: 60px;
	border-left: 60px solid transparent;
	background-origin: content-box;
}

TEXT

background-size

p {
	background-image: url(snail.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

background-size: cover;

background-size: contain;

background-size: 100% 100%;

background-size: 25% 30%;
background-repeat: no-repeat round;

background shorthand

background: [ <bg-layer> , ]* <final-bg-layer>
where
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} 
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>