将背景图像添加到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后端“主题选项”中：

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

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

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

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

无需重叠或添加样式

不要忘记木星主题对你的背景图像有反应......

解决高级主题问题的最准确方法是阅读文档，搜索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;
    }
}