html - 全屏居中背景响应

Question

我希望让我的主页成为全屏居中背景图片，无论设备的屏幕尺寸如何，图片始终覆盖整个页面并具有正确的纵横比。我还希望它能在各种设备上工作。

我见过各种不同的方法来做到这一点，但我似乎没有得到我正在寻找的效果。所以我要么做错了事情，要么就是还没有找到/想过可行的解决方案。

谢谢

Answer 1

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

尝试上面的代码并根据需要将 html 与任何其他元素切换。因此，如果您只想将它​​放在 body 之类的地方。

这摘自这篇关于 CSS 技巧的文章 -

CSS Tricks - Perfect Background Image