画面の右半分に背景画像を配置する

Question

私は画面の右側に背景画像を配置しようとしています。中程度の画面では半分、大きなものでは画像全体（画像スケーリングしないでください）。問題は、未知の幅を持つdivの中心に背景の左側を配置する方法がないように思われることです。

imgタグは使用できません。水平スクロールバーになるためです。

編集： 少なくともバックグラウンドポジションで、バックグラウンドを私が望むように配置する方法はないようです。 background-position: top 50px left 100pxと書くことで、いずれの側からもバックグラウンドをオフセットできますが、位置centerで同じことをすることはできません。なぜ私は不思議です。

schema http://i68.tinypic.com/dhdf9s.png

Answer 1

は、実用的なソリューションです。私は、コンテナ内に絶対位置を持つ別のブロックを追加しました。

.container { 
 
    margin: 50px; 
 
    padding: 10px 10px; 
 
    position: relative; 
 
    width:400px; 
 
    height:270px; 
 
    border:2px solid red; 
 
} 
 
.text { 
 
    float: left; 
 
    height: 200px; 
 
    width: 150px; 
 
    background-color: green; 
 
} 
 
.bg { 
 
position: absolute; 
 
top: 10px; 
 
left: 50%; 
 
width: 50%; 
 
height: 250px; 
 
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg'); 
 
background-position: 0 0; 
 
background-repeat:no-repeat; 
 
background-size: cover; 
 
}

<div class="container"> 
 
    <div class="text"> 
 
    Text block 
 
    </div> 
 
    <div class="bg"> 
 
    </div> 
 
</div>

Answer 2

はそうのような背景のサイズと背景の位置を設定しようとしている。ここで

background-position: 100% 0; 
background-size:50%; 

は、あなたがそれをテストCA：https://jsfiddle.net/dL2u6co7/ここ