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

Question

首先，我暂时无法提供任何 URL 详细信息，因为我正在本地主机上进行开发。但是，希望通过我在下面的清晰描述，您可以提供建议。 :-)

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

我需要图像直接位于页眉 Logo 下方并位于网站页眉模板中，以便它可以针对所有设备进行扩展，但采用粘性页眉以便正文在图像下方滚动。

我提供了两个屏幕截图:第一个屏幕截图使用以下代码，目前位于标题区域下方，另一个屏幕截图显示了它在所有屏幕上的外观。

如果图像不是针对特定形状定制的，则以下代码将起作用。

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

.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;}
}

例如，现在您需要在此处调整媒体查询位置，但您必须在此处适应不同的设备...