CSS 백그라운드 속성 -이미지 삽입과 반복

웹페이지를 다루면서 배경에 이미지를 삽입하거나 

색상을 선택해야할 때가 있습니다..

이번에는 이미지를 삽입하는 방법과 

이미지의 반복효과 에 관해 알아보겠습니다.

CSS 백그라운드 속성 - 크기와 위치지정 도 알아봅시다

배경을 장식하는 속성은  background- 로 시작을 합니다.

배경을 색상으로 표현할때는 background-color: 색상

이미지를 배경으로 선택할때는 background-image:url(" ")

물론 혼합해서 사용도 가능합니다.

페이지 전체에 배경을 선택하려면 선택자를 body로 주면되고

부분으로 선택자를 잡으면 부분에 배경을 줄수도 있습니다.

노란색 배경에 백원짜리 img를 넣었습니다.

이런 백원짜리 img를 하나 넣었는데 img보다 높이와 넓이를

300px로 넣으니 img가 반복이 되네요

위 반복을 제어할때 사용되는 속성이 repeat 속성입니다.

▶ repeat : 이미지를 배경안에서 반복합니다.

▶ no-repeat : 이미지를 한번만 표시합니다.

▶ repeat-x : x축, 수평방향으로만 반복합니다.

▶ repeat-y : y축, 수직방향으로만 반복합니다.

repeat

no-repeat

:repeat-x

:repeat-y

◈html 문서◈

<div id="box2">

<div id="bg2"><p>repeat</p></div>

<div id="bg3"><p>no-repeat</p></div>

<div id="bg4"><p>:repeat-x</p></div>

<div id="bg5"><p>:repeat-y</p></div>

</div>

◈css 코드◈

 div[id^=bg]>p{color:white; font-size:25px; 

                 font-weight:bold; 

                 text-align:center; 

                 line-height:180px}

  #bg2, #bg3, #bg4, #bg5{

   width:150px; height:150px; 

   border:1px solid red; background-color:black; 

   background-image:

   url("https://t1.daumcdn.net/cfile/tistory/224C354058941B7205") }

  #bg2{ float:left; clear:both;} 

  #bg3 { background-repeat:no-repeat; float:left;} 

  #bg4{ background-repeat:repeat-x; clear:both; float:left;} 

  #bg5{ background-repeat:repeat-y; float:left;} 

다음에는 이미지의 크기조절과 위치지정에 대하여 보겠습니다.