移动设备上的网页背景

Question

在我的网站上，我设置了当前的背景CSS属性：

/* General */   
body {
    background-image: url('../img/background2.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:100% 100%;
    color:#000; /* Font color */
    text-align:justify;
}

在我的笔记本电脑上也可以，但当我试图在平板电脑(Nexus7)或智能手机(三星Galaxy S3)上访问网站时，背景会出现高度拉伸，我是指整个页面的长度。

我尝试过媒体查询，但似乎都不起作用。有什么想法吗？

谢谢!

Answer 1

设置"background-size: 100%100%；“仅当设备的纵横比与图像相同时才起作用。它锁定背景的宽度和高度以填充整个屏幕。尝试"background-size: cover;“或"background-size: contain;”。关于这些的文档可以在here上找到。

webkit EDIT：请注意，这只在IE9+上兼容，并且在较旧的安卓浏览器上需要使用--前缀(有关详细信息，请参阅here )。

Answer 2

根据我的经验，背景大小适用于移动浏览器上的像素。

body {
    background-size: 800px 600px;
}

我还没有测试过这段代码，但请尝试：

-webkit-background-size: cover;
background-size: cover;