如何在网站上有一个完整的背景适合屏幕分辨率？

Question

我希望我正确地问这个问题。我想要做的是为我的网站页面的主体设置一个背景，填充用户屏幕。因此，如果屏幕较大，图像会拉伸，当它们缩小浏览器时，背景图像会随之缩小？

#homebdy
{
   background-image:url('../images/bghome.jpg');
}

Answer 1

这将为你做到：

#homebdy{
  background-image:url('../images/bghome.jpg');
  height: 100%;
  position: absolute;
  top: 0;
}

下一步是根据视口大小使图像居中。因为我会建议使用jQuery。例如，如果您使用比例为4：3的图片，请执行以下操作：

var indent = (($(window).width() - (($(this).height())/3)*4) / 2);
$('#homebdy').offset({left: indent});

您可以在a website I am building currently

上看到实时示例

Answer 2

如果您希望根据容器拉伸图像：

#homebdy {
  background-image:url('../images/bghome.jpg');
  background-size:cover;
  width:100%;
}

Answer 3

给出以下CSS：

#homebdy{
  background-image:url('../images/bghome.jpg');
  height: 100%;
  width:100%;
}

Answer 4

尝试这些选项。如果你想拉伸图像，那么背景大小：100％;, background-size：cover;将工作。如果你想保持比例，那么使用background-size：contains

http://compass-style.org/examples/compass/css3/background-size/

Answer 5

  

试试这个

     

homebdy {background：url（../ images / bghome.jpg）;身高：100％;位置：绝对;顶部：0; }

Answer 6

background-size: 100vw 100vh;
background-image:url('your urlurl');
background-repeat: no-repeat; /* this line not necessary */

使用CSS3解决此问题

虽然这篇文章很老，但与2014年最佳解决方案一样。