我想为我的所有页面设置全屏背景图像(与我的主页相同)

时间:2020-04-02 作者:Carlos de Varona

希望你能帮忙。我的网站:www.chromahouse。com公司

我正在尝试将全屏背景图像设置为多个特定页面(约5-6个其他页面)

指向我要使用的图像的链接:https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png

我希望全屏背景图像显示的页面示例:https://www.chromahouse.com/about-chroma-house/

我的计划是删除您在这些页面的页眉上看到的特色图像,并将其替换为背景图像,但以一种从页眉到页脚覆盖整个页面的方式。

感谢您的帮助!

1 个回复
SO网友:Admiral Noisy Bottom

Appearance | Customize

可以使用“外观”|“自定义”下的“附加css”功能修改页面中的大多数css样式。只需找到要覆盖的CSS元素,然后继续更改它们。

如果你把事情搞砸了,改变很容易就取消了

看了你的页面后,我发现你有两种可能CSS Elements, “s”容器或“节”。

将以下内容添加到CSS自定义中;

.section {background-image:url("https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png");}

.container {background-image:url("https://www.chromahouse.com/wp-content/uploads/2019/07/purpleandblue.png");}

Note the . at the beginning of the line!

如果图像不可用,最好也设置背景色。

您还可以配置图像的显示、重复等方式,并将其设置为固定或浮动。

.container {
max-width: 100%;
background-image:url("/wp-content/uploads/2019/07/purpleandblue.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
};
如果希望整个页面具有背景图像,请替换\'container\' 带\'body\'.

是的important to note 通过“附加CSS”选项所做的更改将覆盖现有CSS样式,因此应包括与被覆盖样式相关的任何元素。

您可能需要进行实验,以获得所需的背景图像,例如,分辨率非常高的屏幕会拉伸图像,可能会使其看起来很糟糕。对于更大分辨率的屏幕,您需要非常大的图像,这会消耗带宽并降低网站速度。如果你在谷歌上搜索“无缝背景”,你会发现更小的图像,重复时会产生无缝的背景图像效果。

欲了解更多信息,请查看;

https://www.w3schools.com/cssref/pr_background-image.asp

有关背景元素的更高级示例,请查看此项;

https://www.w3schools.com/cssref/pr_background-attachment.asp

相关推荐

Convert emoji to images

我有一个私有插件,可以导出所有没有“主题化”的帖子,所以输出的只是内容的html(帖子主题为H1,日期/时间为H2)。如果帖子包含表情符号,它会正确显示在主题页面上。但是如果我将HTML输出保存到一个文件中,表情符号会显示为🙁 这些是UniCode字符(我想),我需要生成的HTML页面将表情符号显示为图形图像。创建HTML输出的代码使用标准WP\\u查询对象,然后在have\\u posts循环中输出内容:$thest