[html/css]background 속성(배경 전체 지정)

[html/css]background 속성(배경 전체 지정)

차례 :

끝나지 않을 것만 같았던 배경 관련 속성이 오늘로 끝나네요.

배경 이미지와 관련해서는 background-origin 속성과 background-clip 속성이 더 있지만

이 부분은 나중에 다루어 보겠습니다.

background 속성은 지금까지 다루었던 배경과 관련된 속성을 한꺼번에 지정할 수 있습니다.

사용 예 :

body
{
background: green url('brabbit.png') no-repeat fixed 50% 50%/100% 100%;

}

필요한 속성만 써도 됩니다..

순서는 관계 없지만 background-size 속성을 쓸 경우 앞에 슬래시(/)를 그어서 다른 속성과 구분해 줍니다.

50% 50%/100% 100%는 background-position 가로 50% 세로 50% 위치에, 크기가 가로 100% 세로 100%란 의미

background 속성

▶속성값

background 속성값은 아래에서 파란색으로 표시된 부분을 참조해서 적습니다.

background-color, 배경 색깔 지정

: 16진수(#ff0000), 색 이름(red), rgb 값 rgb(255,0,0) 중에서 선택

예) body{background: green;}

background-image 배경 이미지 주소 지정

: url('rabbit.png');

예) body{background: url('brabbit.png');}

background-repeat 배경 이미지 패턴 지정

: repeat 기본값, repeat-x 가로 반복, repeat-y 세로 반복 no-repeat 반복되지 않음

예) body{background: repeat-x;}

background-attachment 배경 이미지 고정 방식

: scroll 기본값 fixed, local 중 선택

예) body{background: fixed;}

background-position 배경 위치 지정

: left right center (가로) top center bottom(세로), % , cm,px, em 등에서 선택

예) body{background: left center;}

background-size 배경 이미지 크기 지정

: auto, px, %, cover, contain 중에서 선택

예) body{background:100px 100px;}

상속 여부 : no

html/css를 작성해 보겠습니다.

html/css

<!DOCTYPE html>
<html>
<head>
<style>

body{
background: green url('brabbit.png') no-repeat fixed 50% 50%/50% 50%;
}
</style>
</head>

<body>

산토끼 토끼야 어디를 가느냐

</body>
</html>

실행화면

배경색, 배경이미지 삽입, 위치, 고정, 크기와 관련된 background 속성을 모두 알아보았습니다. ^^

[html/css] vertical-align 속성 자세히 알기(수직 정렬) (3)	2014.06.05
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE (1)	2014.06.02
[html/css]background-size 속성(배경이미지 크기 조절) (2)	2014.05.29
[html/css] line-height 속성 배우기 (6)	2014.05.27
[html/css]background-position 속성(배경이미지 위치 지정) (5)	2014.05.26