在iPhone浏览器上不重复的背景

Question

So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :( 所以有一点浏览器兼容性问题，但只在iPhone和iPad Safari浏览器上:(

Site: http://s433108212.onlinehome.us 网站： http ： //s433108212.onlinehome.us

My client wanted the space background in the header to stretch past the 1000px area I have set for the header. 我的客户希望标题中的空间背景延伸超过我为标题设置的1000px区域。 So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile. 所以我的解决方案就是创建另一个100％带有背景的包装器：repeat-x图像用于平铺的空间。

Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/ 它适用于PC和Mac上的每一个浏览器，除了iPhone和iPad之外，它真的令我感到困惑，因为在下面的屏幕截图中，space_stretch_bg包装中的平铺背景图像是1）被推到左边和2 ）没有平铺所以3）你看到它上面1000px固定横幅后面的白色：/

在此输入图像描述

Anyone else run into this? 其他人遇到这个？

CSS: CSS：

body { 
    width: 100%; margin: 0 auto;
    background-image:url('../img/clouds.jpg');
    background-repeat:repeat; 
}
.wrapper_bg {
    position: absolute; 
    width: 100%; height: 350px; 
    background-image:url('../img/bg_tile.gif'); 
    background-repeat:repeat-x; 
}
.space_stretch_bg { 
    position: absolute; 
    top: 100px; width: 100%; height: 250px; 
    background-image:url('../img/space_banner_big.jpg'); 
    background-repeat:repeat-x; background-position:center; 
}
.container1000 { 
    position: relative; 
    width: 1000px; top: -100px; 
    margin:auto; 
}
#content_container { 
    position: absolute; 
    overflow: hidden; 
    top: 350px; padding: 20px; 
    background: #fff 
}

Shortened HTML: 缩短的HTML：

<body>

<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">

    <!-- nav_bar -->

    <div id="banner">
        <a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
            <div class="logo">
                <h1>Athena's Web</h1>
                <h2>Carpe Noctem</h2>
                <img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
            </div>
         </a>

        <div id="social_media">

            <!-- social_icons -->

        </div><!-- social_media -->

        </div><!-- banner -->
        <!-- End Header -->

Answer 1

First of all: it's because of wrapper_bg background that gets smaller. 首先：这是因为wrapper_bg背景变小了。 It's behind space_stretch_bg. 它位于space_stretch_bg之后。 Give wrapper_bg min-width: 1000px because your content_container is 1000px. 给出wrapper_bg min-width: 1000px 1000px，因为你的content_container是1000px。

You can see the white space also on your pc browser if you make the browser smaller. 如果使浏览器变小，您也可以在PC浏览器上看到空白区域。

在iPhone浏览器上不重复的背景

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-09-27 21:37:51

在iPhone浏览器上不重复的背景

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-09-27 21:37:51

解决方案1
3 已采纳 2012-09-27 21:37:51