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

我正在一个使用Jupiter 4主题的网站上。仪表板中提供配置标头布局的选项, 但是没有任何可将背景图像添加到标头的选项。

样式表位于themes/jupiter/stylesheet/css/styles.css。在其中, 我尝试放置背景图片：url(‘/ wp-content / uploads / 2016/04 / header-miami-beach-sign.png’);以＃mk-header开头的不同ID定义, 但未显示任何图像。标题背景只是纯白色。

我正试图扭转这个：

到这个：

#1

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

你可以禁用工具栏, 并将标题高度设置在140像素到200像素之间(如果需要, 还可以设置更高)。

对于样式, 请转到”样式标签(或菜单)：

• 首先, 你可以在”标题”中取消设置(或重置)白色背景(透明)。
• 然后在”背景”部分中添加(选择标题区域), 即可在此处设置背景图像。

无需重叠或添加样式

不要忘记木星主题对你的背景图像具有响应性……

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

#2

你需要从叠加元素中删除当前背景。然后, 你可以将背景添加到标题中, 这样就会看到它。

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