正確な幅+高さと位置を保持する固定位置画像

Question

私はこれをある程度まではできますが、私が望む方法では100％ではありません。だから誰でも私がこの権利を手に入れることができればそれは大いに感謝されるだろう。

私は1060pxの幅を持つWordpressウェブサイトを持っています。 </body>タグの直前に画像を含むDIVを作成しました。この画像をサイトコンテナの左側に置いておきたい。私はposition：relativeを使ってこれを作成しました。 CSS。しかし、私がしたいことは、この要素がポジションを持つことです：固定;スクロールされたときに画面上の位置を維持します。もう一度CSS内でこれを作成できます。 1920x1080の画面ですべてのものを見ることができますが、2304x1440の画面で見ると、画像はサイトのコンテナから離れた位置に移動し、効果は失われます。

ここでは、1920x1080の画面でエフェクトを正しく表示するために使用したHTMLとCSSの例を示します。

HTML

<div class="left-container-wrapper"> 
<div class="left-container"><img src="image-url.jpg" width="100%"   /></div> 
</div> 

CSS

.left-container-wrapper { 
width: 50%; /* Get it to be half the screen width */ 
.left-container{ 
float: right; /* To force it to the right edge of the parent container  which is exactly half the screen width */ 
position: fixed; 
left: 530px; /* Half the width of the site container */ 
} 

私は何を後にしていますが、すべての私のサイトコンテナの端に触れる固定位置と画面上の画像の静止を保つための方法です画面サイズ。

誰もが私が後になる効果を作成するいくつかのCSSを提案することはできますか？

Answer 1

@mediaを使用すると、画面サイズがページの全幅（1080ピクセル）に達した後で、画像を追加して本文を変更できます。 Check out this jsFiddle for an example.右下ペインのサイズを変更して、効果を確認します。

CSS

@media screen and (min-width: 1080px) { 
body { 
    background-image: url("https://s.w-x.co/twcn_TWC_FacebookVideo_825x130_opt3.jpg"); 
    background-repeat: no-repeat; 
    background-position: left top; 
    background-attachment: fixed; 
    } 
} 

#content { 
    margin: 50px 100px; 
}