이번 포스팅에서는 각종 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