将背景图像添加到 Jupiter 4 WordPress 主题标题

Question

我正在开发一个使用 Jupiter 4 主题的网站。在仪表板中，有配置标题布局的选项，但没有向标题添加背景图像的选项。

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

我正在尝试转这个：

进入这个：

Answer 1

您需要从覆盖元素中移除当前背景。然后你可以将你的背景添加到标题中，它会被看到。

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

Answer 2

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

您可以禁用工具栏并将标题高度设置在 140 像素到 200 像素之间（或更多，如果需要）。

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

• 首先，您可以在“标题”中取消设置（或重置）白色背景（透明）。

• 然后添加“背景”部分（选择标题区域），您可以在那里设置您的背景图片。

无需重叠或添加样式

不要忘记 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;
    }
}