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

Question

首先，当我在 localhost 上开发时，我无法提供任何 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;}
}

现在你需要在这里调整媒体查询的位置，但是你必须在这里适应不同的设备...