背景图像缩放到屏幕大小而不是内容答案

【问题标题】：Background image scale to screen size not to the content背景图像缩放到屏幕大小而不是内容
【发布时间】：2016-01-29 18:22:22
【问题描述】：

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

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

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

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

基本上我在移动视图中遇到问题。

【问题讨论】：

【解决方案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 */
}

【讨论】：

【解决方案2】：

将此 CSS 用于 body 标签

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

【讨论】：

【解决方案3】：

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

【讨论】：