个性化阅读
专注于IT技术分析

将背景图像添加到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');
}
赞(0) 打赏
未经允许不得转载:srcmini » 将背景图像添加到Jupiter 4 WordPress主题标头
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏