当前位置: 首页 > 知识库问答 >
问题:

背景图片不会显示在整个页面上

厍光霁
2023-03-14

嗨,我的wordpress网站有问题-我用这个css改变了页面的背景:

. page-id-689#主{背景: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg')无重复中心!重要;

-webkit背景尺寸:封面!重要的

-moz背景尺寸:封面!重要的

-o-背景-大小:封面!重要;

background-size: cover !important;

min-height:100% !Important;

}

问题是背景不会显示在整个页面上(截图)。

我已经试过了:

. page-id-287#page_wrapper{高度: 100%!重要;边距: 0px自动;}

html,正文{height:100%}

我还尝试设置最小高度为100%-不会工作

!!!当我将高度设置为1200px时,问题就解决了,但它也会在较低的分辨率下引起巨大的问题。有人能帮我吗?

共有2个答案

闻人宜
2023-03-14

background-size: cover;覆盖容器的大小。查看您的站点,#主id只会和其中的内容一样大。如果您希望它与图像具有相同的高度,以便覆盖整个页面,您需要设置实际的高度值。尝试添加高度: 802px;它会修复它,因为这是图像的高度。

如果想要更优雅的解决方案,请将以下内容添加到身体中:

body {
   background: url('http://www.gamekey.sk/wp-content/uploads/2015/09/thief-totalne.jpg') no-repeat center center fixed; 
}

然后从中删除背景色。st内容

如果您希望多个页面具有不同的背景,您需要创建一个具有唯一ID的单独包装器,该包装器运行页面的整个宽度和高度,而不管页面上的内容如何。

有关背景大小的更多信息,请参见:http://www.w3schools.com/cssref/css3_pr_background-size.asp

赵渊
2023-03-14

您应该将所有容器元素的高度设置为100%,直到html元素http://prntscr.com/8o41id

 类似资料:
  • 我正在开发一个swing应用程序(让我们忽略为什么)。 我需要做一个自定义设计的滚动条。到目前为止还不错,我实现了我的ScrollBarUI后代-我有自定义按钮,自定义拇指,自定义轨道...除了按钮周围的区域-我在那里添加了一些填充,我想把我所有的滚动条包装成一个圆角矩形。 由于我在ScrollBarUI中没有找到这样做的方法,我决定扩展JScrollPane(扩展那里使用的ScrollBar,这

  • 问题内容: 我正在进行响应式设计,并且“bgMainpage”类具有背景图片,但并未在所有设备上的Safari上显示。我已经应用了背景尺寸封面,因为这正是客户想要的。我也添加了特定于浏览器的CSS,但我不确定该怎么做才能在Safari中显示。Chrome,FF,IE可以很好地显示图像。有任何想法吗 ? CSS: 问题答案: 我将图像格式从jpeg转换为gif,并且有效。所以最终的CSS是:

  • 我的组件没有显示。我该如何解决这个问题? 法典: 结果:

  • 问题内容: 这是一个非常简单的程序,我已尽力而为,但JPanel并未提供背景图片。我只希望面板上有一个简单的背景图像。 这是我的代码: 提前致谢 问题答案: 更换 与

  • 我创建了一个简短的脚本来显示Tkinter画布元素中的照片。我将画布元素的大小与照片大小相同,但是当我启动窗口时,无论我如何扩展窗口,我通常只能看到图像的一小部分。 另外,当我打印出图像的大小时,我用它来设置画布的大小,这个大小是(922614),而当我在画布上记录鼠标点击时,右下角大约是(500300)。我的代码如下。我应该改变什么,使画布与图像大小相同,并完全显示图像? 下面是一个屏幕截图,显

  • 问题内容: 我想在移动网页中创建一个背景覆盖的部分,因此我使用了以下CSS代码: 背景在Android(Chrome,Firefox …)上可以正确显示,但在iPhone或iPad(Safari,Chrome iOS …)上则完全不显示。我已经尝试在DOM准备就绪时使用jQuery设置这些属性,但是没有运气。我读到大小可能是个问题,但是图像约为700kB(1124x749px),因此它应该符合Sa