web-dev-qa-db-ja.com

CSSの背景位置がMobile Safari（iPhone / iPad）で機能しない

モバイルサファリの背景の位置に問題があります。他のデスクトップブラウザーでは正常に機能しますが、iPhoneまたはiPadでは機能しません。

body {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;
 padding: 0px;
 margin: 0px;
 font-family: "Arial";
}

#header {
 width: 1030px;
 height: 215px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 85px;
 background-image: url('images/header.png');
}

#main-content {
 width: 1000px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;
 padding-top: 15px;
 padding-bottom: 15px;
 background-image: url('images/content_bg.png');
 background-repeat: repeat-y;
}

#footer {
 width: 100%;
 height: 343px;
 background-image: url('images/background_bottom.png');
 background-position: center;
 background-repeat: no-repeat;
}

「background_top.png」と「background_bottom.png」の両方が左にシフトしすぎています。私はググった、そして私が知る限り、background-position [〜＃〜] is [〜＃〜]モバイルサファリでサポートされています。キーワード（ "top"、 "center"など）、px、％のすべての組み合わせも試しました。何かご意見は？

ありがとう！

更新：これは.htmlファイルのマークアップです。これは、他のブラウザーでデザインとレイアウトを細かく表示します（上記のcssも更新しました）。

<html lang="en">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div id="header"></div>
  <div id="main-content"></div>
  <div id="footer"></div>
 </body>
</html>

両方の背景画像は非常に幅が広​​い（〜2000px）ため、任意のサイズのブラウザーでスペースを占有します。

追伸おそらくもっと効率的なCSSショートカットをいくつか使用できることはわかっていますが、今のところは、コードを整理して表示できるようにすることで気に入っています。

cssmobilesafaribackground-position
17
Nick

IPhone/Webkitブラウザーは、bodyタグに配置されている場合、背景画像を中央揃えにすることはできません。これを回避する唯一の方法は、bodyタグから背景画像を削除し、追加のDIVをラッパーとして使用することです。

#wrapper {
 background-color: #000000;
 background-image: url('images/background_top.png');
 background-repeat: no-repeat;
 background-position: center top;
 overflow: auto;
}


<html lang="en">
 <head>
  <title>Title</title>
  <link rel="Stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
 </body>
</html>
9
Jimbola

どうやら、iPhone/iPadで「スクロール」すると、デスクトップブラウザのようにページがスクロールされません。あなたがやっていることは、ビューポート内のページ全体を移動するようなものです。 （ここで間違った用語を使用している場合は、誰かが私を訂正してくれると思います。）

つまり、background-position：fixedは引き続き「サポート」されますが、ページコンテンツがページ内でスクロールするのではなく、ページ全体がビューポート内で移動するため、実際の効果はありません。

4
Squig

それはで動作します

background-position-x: 50%;
background-position-y: 0%;

まだ追加します

background-position: center top;

他のブラウザのために。

4
leymannx

本文に配置するラッパーIDを作成し、次のCSSを含めます。

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: url('../images/compressed/background-mobile.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
}

コンテンツがdiv内に入らないようにしてください。そうしないと、ページ全体がスクロールせずに修正されます。

2
lg365

私はこの問題を抱えており、ここで言及されているように、別のスタイルを使用して固定フッターを取り除くことで対処しています： iPad用のCSSを対象とするが、メディアクエリを使用してSafari 4デスクトップを除外するには？

0
Syntax Error