背景の位置：センターで左隅を入れ

Question

希望は、この画像は、（画像の透明部分は、それを示す必要があります

がです:-) .content事業部よりも大きい、私は

欲しいもの、より多くの説明します背景画像を中央から始めることができるようにするには、ほとんどの節約方法（CSSだけが望ましい）がありますか？

background-position: center top; 

...画像の中心ではなく、左隅を使用します。

私は画像自体を操作することはできません（透明オフセットを使用して）、絶対値を使用することはできません。

Answer 1

絶対値を使用せずに、目的の要素の背景イメージでこれを行うことはできません。理由の説明は、this answerを参照してください。簡単に言えば、バックグラウンドのパーセンテージとキーワードの値は、スライディングパズルのように機能し、画像を厳密に要素のバックグラウンド位置の範囲内に保ちます。絶対値だけがこの振る舞いから免除されます。

イメージを希望の要素の擬似要素のバックグラウンドにすることで不正行為をすることができますが、これは相対的に配置される必要があり、絶対配置されたすべての子孫、要素：

.content { 
 
    position: relative; 
 
    height: 200px; 
 
    border: 1px solid; 
 
} 
 

 
.content#one { width: 100px; } 
 
.content#two { width: 200px; } 
 

 
.content::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: url(http://placehold.it/150x150) no-repeat; 
 
}

<div class="content" id="one"></div> 
 
<div class="content" id="two"></div>

Answer 2

が擬似要素で行うことができます

.cimg { 
 
    border: 1px solid black; 
 
    height: 400px; 
 
    position: relative; 
 
} 
 

 
.cimg::after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 50%; 
 
    background-image: url("http://www.youramazingplaces.com/wp-content/uploads/2014/06/sunset-5.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: 400px; 
 
}

<div class="cimg"> 
 

 
</div>

そのため