背景图像缩放到屏幕尺寸而不是内容

Question

我正在使用以下JS设置每个页面的背景图像

 var image = 'url(' + imageUrl + ') top left no-repeat fixed';
        $('body').css({ 'background': image });

通过设置"background-size:cover!important;" 能够根据页面内容的高度和宽度缩放图像。

我的要求是根据屏幕尺寸而不是页面内容尺寸缩放背景图像。

基本上我在移动视图中面临问题。

Answer 1

您正在为主体设置背景。 正文是页面内容的大小。

如果我是你，我会直接在身体上创建一个div 。

HTML

<body>
  <div class="page-bg"></div>

  <!-- YOUR PAGE CONTENT -->
</body>

CSS

.page-bg {
  max-height: 100vh;
  min-height: 100vh;
  width: 100%;
  /* your background styles */
}

Answer 2

使用此CSS作为body标签

body {
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-attachment: fixed;
}

Answer 3

您可以使用Viewport-percentage lengths相对于视口大小设置大小。