将背景图像以移动浏览器，风景和肖像（iPhone / iPad）居中

Question

我有一个1024 x 1024像素的背景图像； 这些尺寸的原因是我希望图像以横向和纵向模式覆盖屏幕。 图像的中心正好有一个小的徽标，否则它是一个简单的渐变。 我希望图像始终居中； 换句话说，徽标必须始终以横向和纵向方向位于屏幕中央。 我也希望图像覆盖整个屏幕，但是不希望背景图像创建不必要的滚动条； 因此，我不希望通过在屏幕上拖动来移动图像。

这是我尝试过的方法（为了这个示例，我仅在HTML中使用样式标签）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Test</title>
<style>
    html,body {
        width:100%;
        height:100%;
    }
    body {
        background-image: url('../img/background.jpg');
        background-position:center;
        background-attachment:fixed;
        background-repeat:no-repeat;
    }
</style>
</head>
<body>
Hello world.        
</body>
</html>

此处代码的问题在于图像未居中（在纵向模式下，徽标显示在屏幕的右侧，横向在屏幕底部）。 看起来背景图像也成为页面内容的一部分，因此会引起滚动条，这意味着可以左右拖动图像。

我更喜欢只使用CSS和html的解决方案，但如果可以使用Javascript，则可以接受。 请不要在此处提及与其他浏览器有关的问题，我是在这个问题中专门询问有关Mobile Safari的问题。 我曾尝试在不同的答案提出的建议很多，我还没有发现在移动Safari浏览器正常工作的解决方案。

所以这再次是我的要求形式：

背景图像始终覆盖整个屏幕（没有空白显示）
图像始终居中（因此，溢出量在左右左右/顶部和底部之间平均分配）
当iPad在横向和纵向之间旋转时，图像保持居中
固定背景图片（无法移动）
最好是仅使用HTML和CSS的解决方案（CSS3也可以）

Anwyone知道如何做到这一点？

更新：

此问题可能出在计算机和椅子之间！ ;）在UIWebview中解决问题后，我将发布更新。

好。 已确认。 这里什么也看不到！ :)这个问题是我自己做的，我提供的HTML实际上可以正常工作。 这是错误的，因为正在加载的HTML是一个错误屏幕，并且在尝试“伪造”错误情况时，在UIWebview准备就绪之前加载了UIWebview时，我造成了实际错误。 当我在正确的时间加载HTML时，居中突然起作用，并且滚动条消失了。 一切都是100％。

Answer 1

背景图像没有高度和宽度，其高度和宽度取决于应用它们的父级的高度和宽度。 因此，背景图片无法创建滚动条。

如果要根据屏幕尺寸调整背景图像的大小，请使用以下命令：

background-size: cover;

将背景图像以移动浏览器，风景和肖像（iPhone / iPad）居中

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-06-26 17:10:42

将背景图像以移动浏览器，风景*和*肖像（iPhone / iPad）居中

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-06-26 17:10:42

将背景图像以移动浏览器，风景和肖像（iPhone / iPad）居中

解决方案1
3 已采纳 2012-06-26 17:10:42