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

我正在使用木星4主题的网站上工作。在仪表板中有用于配置标题布局的选项，但是没有什么可以向标题添加背景图像。将背景图像添加到木星4 WordPress主题标题

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

我试图把这个：

到这样：

来源

2016-04-29 TARKUS

代码或链接到该网站将需要帮助你。 – Vector

木星4的主题，一切都在木星的后端“的主题选项”：

您可以禁用工具栏和（如果需要以上）140px之间设置页眉高度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; 
    } 
}

来源

2016-04-29 23:40:19 LoicTheAztec

我的图像适合我的屏幕尺寸。不幸的是，它不适合更大的屏幕分辨率。有没有办法让主题调整或切换不同屏幕尺寸的背景图像？ – TARKUS

这是背景图像（和响应网站）的问题......在这种情况下，取消设置背景图像，并使用条件CSS与类'.mk-header-bg.mk-background-stretch {background-image：url（' /myImage.jpg'）！important;}'。条件CSS就像'@media唯一屏幕和（max-width：768px）{}'。所以你会使用不同大小的图像。 – LoicTheAztec

这就是我要找的。很有帮助。 – TARKUS

您需要从叠加要素删除当前背景。然后你可以添加背景到标题，它会被看到。

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

来源

2016-04-29 23:11:55 Vector

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

回答

相关问题