Question

首先，我无法提供任何URL详细信息，因为我正在localhost上开发 - 目前。但是，希望通过下面的清晰描述，您可以提供建议。： - ）

我一直在尝试使用Uplift主题在我的Wordpress网站的.header-wrap #header中定位图片。下面的代码工作正常，但由于纵横比，图像低于标题，这意味着它的高度明显超过160px。我也尝试了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;}
}

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

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

1 个答案: