본문 바로가기
css

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

by 지구별에 2014. 5. 30.

 

 

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

 

 

차례 :


background-image
background-repeat
background-attachment
background-position
background-size
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를 작성해 보겠습니다.

background.htm

 

 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 속성을 모두 알아보았습니다. ^^

 

 

 

 

반응형

댓글1