保持精確的寬度+高度和位置的固定位置圖像

我能夠在一定程度上獲得此工作，但不是100％的我想要的方式。所以如果任何人都可以幫助我解決這個問題，我們將非常感激。保持精確的寬度+高度和位置的固定位置圖像

我有一個寬度爲1060px的Wordpress網站。我在</body>標記之前創建了一個包含圖像的DIV。我希望此圖像位於網站容器的左側。我用這個位置創建了它：relative; CSS。但是，我想要做的是讓這個元素具有這樣的位置：fixed;屬性，以便在滾動時保持其在屏幕上的位置。我可以再次在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來創建我以後的效果嗎？

來源

2016-03-23 Peter

在屏幕尺寸達到您網頁的最大寬度（1080px）後，您可以使用@media更改主體，添加圖像。 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; 
}

來源

2016-03-23 15:33:19 Danielson

保持精確的寬度+高度和位置的固定位置圖像

回答

相關問題