[CSS] 6. Background ( 배경 설정 )

이번 포스팅에서는 각종 HTML 태그내에서 쓰이는 배경 관련 속성에 대해서 알아보도록 하겠습니다. 배경관련 속성에는 다음과 같은 것들이 있습니다.

•  background-color 는 배경 색상을 설정하기 위한 속성입니다.

•  background-image 는 배경 이미지를 설정하기 위한 속성입니다.

•  background-repeat 는 배경 이미지의 반복 여부를 설정하기 위한 속성입니다.

•  background-position 는 배경 이미지의 위치를 설정하기 위한 속성입니다.

•  background-attachment 는 배경 이미지의 스크롤링을 설정하기 위한 속성입니다.

•  background property is used as shorthand to specify a number of other background properties.

 

배경 색 설정하기

<p style="background-color:yellow;"> This text has a yellow background color. </p>

This will produce following result:

This text has a yellow background color.

 

 

 

배경 이미지 설정하기

<table style="background-image:url(/images/pattern1.gif);"> <tr><td> This table has background image set. </td></tr> </table>

 

 

배경 이미지 반복하기

<table style="background-image:url(/images/pattern1.gif); background-repeat: repeat;"> <tr><td> This table has background image which repeats multiple times. </td></tr> </table>

 

아래 예제는 배경 이미지를 세로로 반복시키는 예제입니다.

<table style="background-image:url(/images/pattern1.gif); background-repeat: repeat-y;"> <tr><td> This table has background image set which will repeat vertically. </td></tr> </table>

 

아래는 배경 이미지를 가로로 반복시키는 예제입니다.

<table style="background-image:url(/images/pattern1.gif); background-repeat: repeat-x;"> <tr><td> This table has background image set which will repeat horizontally. </td></tr> </table>

 

 

배경 이미지 위치 설정하기

배경 이미지를 왼쪽에서 100 픽셀 떨어뜨려서 위치시키는 예제입니다. 

<table style="background-image:url(/images/pattern1.gif); background-position:100px;"> <tr><td> Background image positioned 100 pixels away from the left. </td></tr> </table>

다으므 예제는 배경 이미지의 위치를 왼쪽에서 100 픽셀 그리고 위에서 200 픽셀 떨어진 곳에 위치시키는 예제입니다.

<table style="background-image:url(/images/pattern1.gif); background-position:100px 200px;"> <tr><td> This table has background image positioned 100 pixels away from the left and 200 pixels from the top. </td></tr> </table>

 

 

배경 이미지 고정 또는 스크롤 여부 설정하기

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

 

아래 예제는 배경이미지를 고정시키는 예제입니다. 

<p style="background-image:url(/images/pattern1.gif); background-attachment:fixed;"> This parapgraph has fixed background image. </p>

이번 예제는 스크롤링을 해주는 예제네요.

<p style="background-image:url(/images/pattern1.gif); background-attachment:scroll;"> This parapgraph has scrolling background image. </p>

 

 

배경 속성 한꺼번에 설정하기

background 속성은 여러개의 배경관련 속성을 한꺼번에 설정할 수 있도록 해줍니다. 

<p style="background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated background image. </p>

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_backgrounds.htm