html - 如何让我的页面根据分辨率加载不同的图像？

Question

我正在这个网站上工作。它是基于 Joomla 的，所以我在尝试转换它时不得不学习一些新东西。我终于能够让它看起来像我想要的那样，但我有一些问题，因为主背景（图像模块）很2100px宽，在宽分辨率下看起来很棒，但在较小的分辨率上却很大。

有没有办法在 HTML（或其他）中编码一些东西，如果分辨率是这个，然后让模块显示这个图像，等等？

Answer 1

我不知道在不同的模块中加载，但您可以使用 CSS 媒体查询为特定视口尺寸加载新的背景图像：

@media only screen and (min-width:0px) and (max-width:2099px)
{
    .my_image { background-image:MY_NEW_IMAGE; }
}

Answer 2

尝试

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;
}

演示

来自：完美的整页背景图片，css3 技术。