イメージの上にブートストラップパネルを配置する方法

Question

イメージにブートストラップパネルを配置しようとしていますが、イメージを追加しましたが、パネルがまったく見えないので、画像上にパネルを配置する方法を知る必要があります。ここでは、HTMLコードが

<div class="row"> 
      <div class="col-xs-12"> 
       <div class="auroraXbodypic"> 
        <div class="auroraXpanelBody"> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <div class="panel panel-default"> 
            <div class="panel-body"> 
             Basic panel example 
            </div> 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           <div class="panel panel-default"> 
            <div class="panel-body"> 
             Basic panel example 
            </div> 
           </div> 
          </div> 
         </div> 

        </div> 
       </div> 
      </div> 
     </div> 

です。ここCSSは、基本的に私が側で画像側の2枚のパネルを表示しようとしています絵のために

.auroraXbodypic { 
    content:url(../images/pic.png); 

} 

です。

JSFIDDLE

Answer 1

は次のようにあなたのCSSを変更します。

.auroraXbodypic { 
    background-image:url(http://placehold.it/350x150); 
    -webkit-background-size: cover; /* for Chrome and Safari */ 
    background-size: cover; /* for others */ 
} 

JSFIDDLE