background

 

-background

:모든 background 속성들을 한번에 선언할 수 있는 축약속성이다.

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

 

{background:color position size repeat origin clip attachment image;}

background-color : 배경 색상을 지정

background-position : 배경 위치를 지정

background-repeat : 배경의 반복 여부를 지정

background-attachment : 배경의 고정 여부를 지정

background-image : 배경에 이미지를 url로 지정

 

사용 예)

div{background:#ff0000 url(bg.gif) top left no-repeat}

 

 

-background-attachment

:배경의 고정 유무를 지정하는 속성으로 페이지의 다른 부분에 상관없이 고정시킬지 스크롤 되게 할지 여부를 정할 수 있다.

 

{ background-attachment(속성):value(값); }

scroll : 기본값(default)

fixed : 배경을 고정

inherit : 지정 요소의 배경 고정 유무를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { background-attachment:fixed; }

 

 

-background-color

:배경의 색상을 지정

 

{ background-color(속성):value(값); }

transparent : 기본값(default), 배경 색상을 투명하게 지정

color : 배경 색상을 지정

inherit : 지정 요소의 배경 색상을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { background-color:#00ff00; }

*CSS 에서 사용할 수 있는 색상코드는 Hexadecimal color(가장 많이 사용하는 방법), RGB color, RGBA color, HSL color, HSLA color, Predefined/Cross-browser color names 처럼 다양한 종류가 있다.

1.Hexadecimal color

{ background-color:#00ff00; }

2.RGB color

{ background-color:rgb(255,0,0); }

3.RGBA color

{ background-color:rgba(255,0,0,0.5); }

4.HSL color

{ background-color:hsl(120,65%,75%); }

5.HSLA color

{ background-color:hsla(120,65%,75%,0.3); }

6.Predefined/Cross-browser color names

{ background-color:red; } HTML과 CSS에서 사용 가능한 색상 이름은 147가지이다. 아래 예제처럼 red, blue, yellow 등으로 사용할 수 있다.

 

 

-background-image

:배경에 이미지를 url로 연결하여 넣을 수 있으며 해당 요소의 사이즈와 같게 나타난다. 요소의 padding과 border를 포함하지만 margin은 포함하지 않는다. 기본적으로 top-left 에 위치하며 수직, 수평 양 방향 다 반복되어 나타난다.

 

{ background-image(속성):url(경로); }

url('경로') : 이미지가 위치한 경로를 지정

none : 기본값(default), 배경 이미지가 없을 경우에 지정

inherit : 지정 요소의 배경 이미지를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { background-image:url(bg.gif); }

 

 

-background-position

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

 

{ background-position(속성):value(값); }

left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | center : 배경의

위치를 상하좌우로 지정

x% y% : x는 수평(left, right)값이며 y는 수직(top, bottom)값, top left 는 0% 0%(기본값), right bottom 은 100% 100%, center 는 50%

xpos ypos : x는 수평(left, right)값이며 y는 수직(top, bottom)값, top left 는 0 0(0일 때 pixel 생략 가능), right bottom 은 해당 영역의 가장

큰 pixel값, % 와 px 값은 함께 사용 가능하다.

inherit : 지정 요소의 배경 위치를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { background-position:left top; }

 

 

-background-repeat

:배경에 이미지를 넣었다면 이미지를 한 번만 넣을지 반복해서 넣을지 여부를 지정할 수 있다.

 

{ background-repeat(속성):value(값); }

repeat : 기본값(default), 배경이미지를 수직 수평 모두 반복

repeat-x : 배경이미지를 수평(좌우)으로 반복

repeat-y : 배경이미지를 수직(상하)으로 반복

no-repeat : 배경이미지를 반복하지 않고 한 번만 나타냄

inherit : 지정 요소의 배경 반복 여부를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { background-repeat:repeat-y; }

 

 

출처 : http://htmlcss.kr/css/background/