Question

我想在我的html页面中设置背景图片。

所以我有这段代码：

body{
   background: url("background_image.jpg") no-repeat scroll center center / 100% auto;
}

这是我的HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link type="text/css" rel="stylesheet"  href="css/style.css" />
</head>
<body>



</body>
</html>

因此，使用此代码，背景图像不会填满屏幕。

我想以全宽和高度显示图像

Answer 1

尝试使用此css代码：

body{
  background: url(backgroud-image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

或

html{
      background: url(backgroud-image.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

Answer 2

试试这个css：

body{
   background: url("background_image.jpg") no-repeat scroll center top / cover auto;
}

希望有所帮助！

如何将背景图像设置为全屏

2 个答案: