如何根据分辨率使页面加载不同的图像？

Question

我正在研究this site。这是基于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;
}

Demo

来自：Perfect Full Page Background Image，css3技术。