背景画像カルーセルの背景画像

Question

私はブートストラップのカルーセルがうまく動作していますが、の後ろにの背後にこのカルーセル、幅100％の背景画像、画像の80％カルーセルが作動している。 私はhomecarouselのCSSで背景画像を試してみましたが、私はいくつかのトリッキーな位置を試みました：絶対に操作してください（これは良い考えではありません）、すでに存在する投稿をチェックしましたが、何も動作しません... 基本的には、それは大きな長方形の中のちょうど小さな矩形であり、小さな矩形は回転の木です... 何か考えですか？ 私はサイトの90％をプログラムしていないので、JavaScriptを操作する純粋なCSSソリューションを好むだろう。今はそれを取って、すべてのファイルが混乱している。 多くのおかげで、このhttps://jsfiddle.net/rzc1e1jf/について

Answer 1

あなたは行く、私はこれがあなたが必要としていたことを望む？

http://codepen.io/DasithKuruppu/pen/MyGZdd

基本的に私は、これは、容器の80％の幅にカルーセルの内側の画像を設定し、それは次のようになり意味し、10％の左マージンを設定^

carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img { 

     width: 80%; 
     /* left: 50%; */ 
     margin-left: 10%; 
     height: auto; 
    } 

を変更水平に中央に

背景の画像は、カバーの代わりにカバーするように設定しています。カバーは、背景の画像を奥に引き伸ばし、元の画像のアスペクト比を変更する可能性があります。

Answer 2

EDITED回答

どのように？ （外部リソースでブートストラップの基礎を追加したことに注意してください）

今回は最初から始めて、うまくいきます。

---

前答え

私は私が正しくあなたの質問を理解して100％を確認していないが、これはあなたが達成しようとしているものです。

ここ

http://codepen.io/andrasadam93/pen/BKxvRZ

#carousel-container { 
    background-image: url('http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg'); 
    background-size:cover; 
    height:100%; 
    width:100%; 
    position: absolute; 
} 


#homecarousel { 
    position:relative; 
    float:left; 
    margin-left:10%; 
    width: 80%; 
    height:100%; 
} 
.carousel-inner { 
    height:100%; 
} 

Answer 3

ダッシュクループのおかげで多くのお礼をいただきました。また、私はあなたのコードから考えていたように垂直に中心を置いています。あなたは同じことを上下で行います。別の宣言でだからここにある：

.carousel-inner>.item>a>img, .carousel-inner>.item>img { 

width: 90%; 
/* left: 50%; */ 
margin-left: 5%; 
margin-right: 5%; 
height: 90% ; 
margin-bottom:5%; 
margin-top: 5%; 
} 

感謝