将全屏背景设置为 Wordpress 网站？答案

【问题标题】：Set FullScreen Background into Wordpress site?将全屏背景设置为 Wordpress 网站？
【发布时间】：2018-09-27 19:07:10
【问题描述】：

我想将全屏背景放入我的personal Wordpress site，但遇到了一些问题。我尝试以这种方式插入全屏背景：

body {
background-image: url(https://testsite.com/wp-content/uploads/2018/04/Backround5.jpg) !important;
    background-size: cover !important;
}

但是在加载站点时，它会在第二次以全尺寸显示背景，然后再返回到角落背景。如何设置背景图像以全尺寸显示，包括页面内容？受影响URL。提前致谢。

【问题讨论】：

你能解释一下你想要做得更好吗？根据您的 CSS，您似乎正在尝试将背景设置为页面的整个主体，这就是实际发生的情况。您的页面内容可能具有显示在正文背景之上的其他背景（例如，您的滑块会发生这种情况）。
我希望背景进入整个网站，我指的是整个页面，而不仅仅是页面内容之外的内容。目前背景向两侧显示，内容是黑色的。我希望背景也去那里。 i.imgur.com/jbETeHZ.png?1

标签： php css wordpress styles

【解决方案1】：

如前所述，发生这种情况的原因是因为您有其他具有背景的元素被渲染在您的身体上方。

有一个 background:black 被分配给你的一些元素。我已经进行了现场检查并编辑了其中的一些以具有背景：透明！重要，以覆盖设置以显示正文的背景。

您需要浏览您的网站，就像我在下面提供的屏幕截图中所做的那样，您必须找出哪些元素有背景，并将它们的背景设置为透明。

我为从您主页上的这两个元素中删除背景所做的工作是：

一）

#media_image-2 {
    background: transparent !important;
}

.widget-odd .widget-last .widget-first .widget-1 .def-block .widget .clr .widget_media_image {
    background: transparent !important;
}

.ult_tabs .ult_tab_min_contain.tabanimate {
    background: transparent !important;
}

一旦你消除了身体前面元素的所有背景，你将能够看到你的主要背景，就像在提供的屏幕截图中一样。

编辑（除了以前的解决方案）：

如果打算创建一个全视差风格的背景，无论您在哪里滚动，背景都或多或少地固定在某个位置...将其添加到您身体的 CSS 中：

background: url(yourbackground.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;

【讨论】：

图像有线条，但不是全尺寸.. i.imgur.com/sLObomP.jpg 如何在不重复的情况下获得全尺寸..
查看已编辑的解决方案。我相信这就是你想要解释的。
有些不对劲。插入代码后，所有背景都是白色的。
...您需要正确获取您的实际背景...我不知道您的背景的实际 URL。
现在显示正常，但页面元素仍然是黑色的。这是我使用的代码：body { height: auto; margin: 0 auto; color: #C2C2C2; line-height: 24px; font-family: "Tahoma", Helvetica, Arial; font-size: 12px; background: url(https://touchdowner.cz/digital-products/wp-content/uploads/2018/04/Backround5.jpg) no-repeat center center fixed !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-size: cover !important; }

【解决方案2】：

在 body 上试试这个作为背景

background-attachment: fixed;

对于其他元素

.ult_tabs .ult_tab_min_contain.tabanimate{
   background-color: transparent !important;
}

【讨论】：