背景图像无法覆盖整个身体

Question

I have a background image for the body. 我有身体的背景图片。

CSS: CSS：

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: DaxOT, Helvetica, Arial, sans-serif;
  background-image: url("background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color:#f00;
  font-size: 16px;
}

The image does not cover the whole page. 该图像不能覆盖整个页面。 (like it should with background-size: cover) The body has the right size. （就像背景大小一样：封面）身体的大小合适。 You see the red area left and right. 您会看到左侧和右侧的红色区域。 The effect occurs with IE and Firefox. 效果发生在IE和Firefox中。

Snippet: 片段：

 <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; border: 0; } html { width: 100%; height: 100%; min-height:100%; min-width:100%; } body { min-height:100%; min-width:100%; font-family: DaxOT, Helvetica, Arial, sans-serif; background-image: url("https://picload.org/thumbnail/darlclgr/fond_blau-verlauf.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; background-color:#f00; } </style> </head> <body></body> </html>

Answer 1

try adding the height to it 尝试增加高度

width: 100%;
height: 100%;

and for this to work you'll need to add height in html and body too. 为此，您还需要在html和body中添加高度。 Like: 喜欢：

html, body{
min-height:100%;
min-width:100%;
}

If this don't work then add this to body: 如果这不起作用，则将其添加到正文中：

-webkit-background size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size:cover;

背景图像无法覆盖整个身体

问题描述

1 个解决方案

解决方案1
0 2018-02-16 12:28:00

背景图像无法覆盖整个身体

问题描述

1 个解决方案

解决方案1 0 2018-02-16 12:28:00

解决方案1
0 2018-02-16 12:28:00