cssを使用して背景画像の左端を中央に配置する方法

Question

私はレスポンシブサイトとして構築するのに苦労しているという設計を受けました。

Iは、ブラウザウィンドウのエッジまで拡張する画像が欲しいので、私は、スペーサー画像と、流体容器内の背景画像として配置しました。問題は、いったんモバイルになると、上記のコピーの下に背景イメージが表示されることです。

私はこのレイアウトのいくつかの他のバージョンを試しましたが、何も動作しません。誰かに助言があることを願っています。

ここには大まかなマークアップがあります。応答性の効果を達成するために

.test { 
 
    background-image: url(http://placehold.it/1600x500); 
 
    background-repeat: no-repeat; 
 
    background-position: 50% bottom; 
 
    background-size: cover; 
 
    padding: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid test"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6" style="background-color: blue;">left col</div> 
 
    <div class="col-md-6"><img src="http://placehold.it/20x500/b0b0b0" alt="spacer"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

一つの方法は、新たな可視化を一致させるために適宜background-sizeを変更することです。そうすれば、右揃えのデスクトップバージョンは50% 100%から、コンポーネントの半分の高さはモバイルバージョンの100% 50%に変更できます。私はthis jsFiddle demoを作成した例として

、それはこのように書きます：

HTMLはほとんど同じです：

<div class="container bg-pink"> 
    <div class="row half-bg"> 
     <div class="col-sm-6"> 
     <p class="text-right"> 
      <b>bold text first with some nuances</b> then some normal text to break the line. then some normal text to break the line. then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.then some normal text to break the line. 
     </p> 
     </div> 
     <div class="col-sm-6 no-gutter"> 
     <div class="half-holder"> 
     </div> 
     </div> 

    </div> 
</div> 

CSS（重要なビット）我々は定義：

/* Image */ 
.half-holder { 
    height: 100px; 
} 

/* Normal */ 
.half-bg { 
    background: url('https://maxwelldemon.files.wordpress.com/2012/03/2x1-triangle.png') no-repeat right bottom; 
    background-size: 50% 100%; 
} 

/* The media query for responsive */ 

@media (max-width: 768px) { 
    .half-bg { 
    background-size: 100% 50%; 
    } 
} 

を

希望すると助かります！