所有设备的复杂背景图像定位

Question

首先，我无法提供任何URL细节，因为我正在本地主机上开发 - 现在。但是，希望通过下面的清晰描述，您可能会提供一个建议。 :-)

我一直在尝试使用Uplift主题在我的Wordpress网站的.header-wrap #header中定位图像。下面的代码工作正常，但由于长宽比，这意味着它的高度显然超过160像素，图像低于标题。我也试过background sizing和background-position - 这些都没有提供正确的结果。 我知道我需要引入媒体查询，但我首先需要在大屏幕上获取此曲面图像。

我需要将图像直接放在标题徽标下方，并将其放置在网站标题模板中，以便它可以对所有设备进行缩放，但采用粘性标题，因此主体会在图像下方滚动。

我提供了两个屏幕截图：第一个屏幕截图使用下面的代码，当前低于标题区域，另一个屏幕截图显示它应该在所有屏幕上显示的内容。

如果图像不是如此自定义为特定形状，则下面的代码可以工作。

所以，我需要图像保持固定，所以当用户向上或向下滚动时，页面的内容应该在图像下滚动。

.header-wrap #header { 
background-image: url(http://localhost/lps/wp- 
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ; 
background-color: #fff; 
background-repeat: no-repeat; 
background-size: cover; /*this does not produce the outcome required*/ 
background-position: 0 100px; 
-webkit-background-size: 100% 100%; /* Safari */ 
-khtml-background-size: 100% 100%; /* Konqueror */ 
-moz-background-size: 100% 100%; /* Firefox */ 

}

preferred layout

The image as it currently stands using code insert

Answer 1

嗨，你需要媒体的质疑做出回应您的图像背景可能是你不得不产生不同的大小...

.header-wrap #header { 
min-width:100%; 
min-height:100%; 
height:100%; 
width:100%; 
position:fixed; 
top:0px; 
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ; 
background-color: #fff; 
background-repeat: no-repeat; 
background-size: cover; /*this does not produce the outcome required*/ 
background-position: 0 100px; 
-webkit-background-size: 100% 100%; /* Safari */ 
-khtml-background-size: 100% 100%; /* Konqueror */ 
-moz-background-size: 100% 100%; /* Firefox */ 

@media all and (max-width: 1080px) { 
    .header-wrap #header{ left:-600px;} 
} 

@media all and (max-width: 980px) { 
    .header-wrap #header{ left:-300px;} 
} 

@media all and (max-width: 800px) { 
    .header-wrap #header{ left:-300px;} 
} 

@media all and (max-width: 768px) { 
    .header-wrap #header{ left:-300px;} 
} 

@media all and (max-width: 750px) { 
    .header-wrap #header{ left:-380px;} 
} 

@media all and (max-width: 640px) { 
    .header-wrap #header{ left:-280px;} 
} 

@media all and (max-width: 360px) { 
    .header-wrap #header{ left:-180px;} 
} 

@media all and (max-width: 320px) { 
    .header-wrap #header{ left:-160px;} 
} 

现在您需要调整媒体查询ies在这里的位置例如，但你必须适应不同的设备在这里很多...