Question

我有一张背景图片。当窗口是最大尺寸时，一切看起来都很好。但是当我缩小窗口时，背景会随着它缩小，在某些时候，它变得比窗口小，并且不会覆盖整个页面。

我总是占据所有宽度而不是高度。

我该如何解决这个问题？

body {
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("background2.jpg");
    display:flex;
    flex-direction:row;
    font-family: "Courier New","Trebuchet MS", "lucida";
}

Answer 1

对我来说，只有在你没有指定html和body标签的高度时才会出现这个问题。

添加

html, body {
  margin: 0;
  height: 100%;
}

它工作正常！

CodePen Demo

Answer 2

我认为这就是你想要的：

＆＃13;

html { 
  background: url(https://images.unsplash.com/photo-1468914627279-5d80a88fcd43?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

＆＃13;

这是一个代码来自一些额外信息的链接。 https://css-tricks.com/perfect-full-page-background-image/

背景调整大小不按预期工作

2 个答案: