在iPhone瀏覽器上不重復的背景

Question

所以有一點瀏覽器兼容性問題，但只在iPhone和iPad Safari瀏覽器上:(

網站： http ： //s433108212.onlinehome.us

我的客戶希望標題中的空間背景延伸超過我為標題設置的1000px區域。 所以我的解決方案就是創建另一個100％帶有背景的包裝器：repeat-x圖像用於平鋪的空間。

它適用於PC和Mac上的每一個瀏覽器，除了iPhone和iPad之外，它真的令我感到困惑，因為在下面的屏幕截圖中，space_stretch_bg包裝中的平鋪背景圖像是1）被推到左邊和2 ）沒有平鋪所以3）你看到它上面1000px固定橫幅后面的白色：/

在此輸入圖像描述

其他人遇到這個？

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 
}

縮短的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

首先：這是因為wrapper_bg背景變小了。 它位於space_stretch_bg之后。 給出wrapper_bg min-width: 1000px 1000px，因為你的content_container是1000px。

如果使瀏覽器變小，您也可以在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