複数の背景画像CSS3を使用

Question

私はCSS3で複数の背景画像を配置する方法を理解しようとしています。私はそんなにうまくやっていない。ページの上部、ページの中央、ページの下部にイメージを配置する方法を教えてください。説明のために100ピクセル×100ピクセルのブロックを使用しましょう。私はそれらをトップに沿って位置付けることしかできない。

CSS

body { 
background-image: 
url(../images/red.png), 
url(../images/blue.png), 
url(../images/yellow.png); 
background-position: left top, center top, right top; 
background-repeat: no-repeat; 
} 

は、私は彼ら左上、左中央、その後、左下をしたいです。

ありがとうございました

Answer 1

あなたのタグを組み合わせる必要があります。

body { 
    background-image: 
     url(../images/red.png) left top no-repeat, 
     url(../images/blue.png) center top no-repeat,, 
     url(../images/yellow.png) right top no-repeat, 
} 

編集：

<style type="text/css"> 

    background-image: 
    url(../images/red.png), 
    url(../images/yellow.png); 
    background-position: left top, left bottom; 
    background-repeat: no-repeat; 

    #centerIMG { 
     margin-top:-50px; 
     height: 100px; 
     width: 100px; 
     background:url(../images/blue.png) center left no-repeat; 
    } 
    #outer {height: 100%; overflow: hidden; position: relative;} 
    #outer[id] {display: table; position: static;} 

    #middle {position: absolute; top: 50%;} /* for explorer only*/ 
    #middle[id] {display: table-cell; vertical-align: middle; width: 100%;} 

    #inner {position: relative; top: -50%} /* for explorer only */ 
</style> 
    <div id="outer"> 
     <div id="middle"> 
      <div id="inner"> 
       <div id="centerIMG"></div> 
      </div> 
     </div> 
    </div> 

編集：

<style type="text/css"> 
    body 
    { 
     background: 
      url("red.png") top repeat-x, 
      url("blue.png") bottom repeat-x, 
      url("orange.png") center repeat; 

      background-size: 200px, 100px; 
    } 
</style>