为 Jupiter 4 WordPress 主题添加背景图片 header

Question

我正在使用 Jupiter 4 主题开发一个网站。在仪表板中有配置 header 布局的选项，但是没有任何东西可以将背景图像添加到 header。

样式表位于 themes/jupiter/stylesheet/css/styles.css。在其中，我尝试将 background-image: url('/wp-content/uploads/2016/04/header-miami-beach-sign.png'); 放入以 #mk-header 开头的不同 id 定义中，但没有显示任何图像。 header 背景只是纯白色。

我想转这个：

进入这个：

Answer 1

您需要从叠加元素中删除当前背景。然后你可以将你的背景添加到 header 并且它会被看到。

.mk-header-bg.mk-background-stretch,
.mk-header-toolbar {
    background: none;
}
.mk-header-holder {
    background-image: url('/myImage.jpg');
}

Answer 2

在 jupiter 4 主题中，一切都在 Jupiter 后端“主题选项”中：

您可以禁用工具栏并将header高度设置在 140px 到 200px 之间（如果需要可以设置更多）。

对于样式，请转到“样式选项卡（或菜单）”：

首先，您可以在“header”中取消设置（或重置）白色背景（透明）。
然后在“背景”部分添加（选择 header 区域），您可以在那里设置背景图片。

无需重叠或添加样式

不要忘记 Jupiter 主题会响应您的背景图片...

解决高级主题问题的最准确方法是阅读文档、搜索 Jupiter 支持线程或询问此支持线程。

----（更新）----

要设置不同的图像大小，您需要使用 CSS（这只是一个示例）：

.mk-header-bg.mk-background-stretch {
    background: transparent url('/myImage-hd.jpg') no-repeat !important;
}
@media only screen and (max-width: 1024px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-big.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 768px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-medium.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 588px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-medium-small.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 400px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-small.jpg') no-repeat !important;
    }
}
@media only screen and (max-width: 300px) {
    .mk-header-bg.mk-background-stretch {
        background: transparent url('/myImage-very-small.jpg') no-repeat !important;
    }
}

为 Jupiter 4 WordPress 主题添加背景图片 header

Add background image to Jupiter 4 WordPress Theme header

html

css

wordpress

wordpress-theming