jquery - 背景图像超出移动屏幕尺寸的内容

Question

我设计了一个响应式网站。我在我的一些网页中使用固定的背景图像。问题是，在移动屏幕上，图像没有响应，它超出了边界(内容)。..我用谷歌搜索找出原因，但我发现的唯一方法是将图像转换为 wbmp 格式。

当我将图像转换为 wbmp 时，html 根本不接受。..有什么想法可以让图像以响应方式显示在小屏幕上吗？
或者我应该使用什么工具？

CSS

body{
    background:url(../images/gallery-1-big.jpg) center center fixed no-repeat;
    background-size:cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-backface-visibility: hidden;
opacity: 0.8;
}

移动屏幕的同一段代码让图像失真，当我尝试下面的代码时，图像显示但只显示在屏幕的上半部分

@media (max-width: 480px) {
body
{
    background:url(../images/gallery-1-big.jpg)  fixed no-repeat;
    background-size:100%;

}

Answer 1

你需要给css中的图片设置width:100% 和height:100%...

body
{
   background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }