bg 중앙정렬로 한번만 사용하기

테이블이나 DIV에 class="subbgrec"를 사용하여 CSS에서 bg를 중앙정렬로 불러온다

 

<table width="100%"  height="200" border="0" cellspacing="0" cellpadding="0" class="subbg_shadow">
  <tr>
    <td align="center" valign="bottom">&nbsp;</td>
  </tr>
</table> 

 

CSS 예제 하단

 

.subbg_shadow{background:url(subbg_shadow.png); background-repeat:no-repeat;background-position: top center; }

 

 

CSS 예제 백그라운드2

 

#header { background:#692e22 url('//img.echosting.cafe24.com/design/skin/fashion016/header_bg.jpg') no-repeat 50% 0; }

 

CSS 예제 백그라운드3

#slide_image { position:relative; height:270px; text-align:center; background:#2d261e url('//img.echosting.cafe24.com/design/skin/fashion016/bg_slideimage.jpg') repeat-x 0 0; }

 

CSS 예제 백그라운드4

#slide_image { position:relative; height:270px; text-align:center; background:#0d141c url('/wanee/bg_slideimage.jpg') no-repeat 50% 0; }

1. 반복 없음

 

<table width="100%" style="background-image:url('bg.jpg'); background-repeat:no-repeat;">

 

2. 가로반복, 새로반복 없음

 

<table width="100%" style="background-image:url('bg.jpg'); background-repeat:repeat-x;">

 

3. 새로반복, 가로반복 없음

 

<table width="100%" style="background-image:url('bg.jpg'); background-repeat:repeat-y;">

 

4. 배경이미지 테이블보다 적을때 위치지정

 

<table width="100%" style="background-image:url('bg.jpg'); background-repeat:no-repeat; background-position:center center;">

 

또는,
<table width="100%" style="background-image:url('bg.jpg'); background-repeat:no-repeat; background-position:50% 50%;">

 

아니면,
<table width="100%" style="background-image:url('bg.jpg'); background-repeat:no-repeat; background-position:50px 50px;">

 

5. 1개의 테이블에 2개이상 배경 넣을때 각각 다른 위치 지정할수 있는지....

 

<div style="background-image:url('bg1.jpg'); background-repeat:no-repeat; background-position:left top;">
<table width="100%" style="background-image:url('bg2.jpg'); background-repeat:no-repeat; background-position:right top;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>