1

在我的网站上，我设置了当前的背景 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;
}

它在我的笔记本电脑上很好，但是当我试图在我的平板电脑（Nexus 7）或智能手机（三星 Galaxy S3）上访问该网站时，背景的高度似乎被拉长了，我的意思是页面的全长。

我尝试过媒体查询，但似乎没有任何效果。有任何想法吗？

谢谢！

4

2 回答 2

0

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

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

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

-webkit-background-size: cover;
background-size: cover;
于 2013-07-30T15:23:41.513 回答
0

设置“背景尺寸：100% 100%;” 仅当设备与图像具有相同的纵横比时才有效。它锁定背景的宽度和高度以填满整个屏幕。试试“背景尺寸：封面；” 或“背景尺寸：包含；”。可以在此处找到有关这些的文档。

编辑：请注意，这仅在 IE9+ 上兼容，并且您需要在较旧的 Android 浏览器上使用 -webkit- 前缀（有关详细信息，请参见此处）。

于 2013-07-30T15:18:26.450 回答