CSS Hintergrund-Position funktioniert nicht in Mobile Safari (iPhone/iPad)

Ich habe ein Problem mit Hintergrund-Position in mobilen Safari. Es funktioniert gut auf anderen Desktop-Browsern, aber nicht auf dem iPhone oder iPad.CSS Hintergrund-Position funktioniert nicht in Mobile Safari (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; 
}

Sowohl "background_top.png" als auch "background_bottom.png" sind zu weit nach links verschoben. Ich habe gegoogelt und soweit ich das beurteilen kann, Hintergrund-Position IS in mobilen Safari unterstützt. Ich habe auch jede Kombination von Schlüsselwörtern ("top", "center" usw.), px und% ausprobiert. Irgendwelche Gedanken?

Danke!

Update: hier ist das Markup in der HTML-Datei, die das feine Design & Layout wird in anderen Browsern: (I auch die oben CSS aktualisiert)

<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>

Beiden Hintergrundbilder sehr breit sind (~ 2000px), um Platz in einem beliebigen Browser zu belegen.

P.S. Ich weiß, dass es wahrscheinlich ein paar effizientere CSS-Shortcuts gibt, die ich verwenden könnte, aber im Moment mag ich es, wenn der Code so organisiert ist, wie ich ihn für die Sichtbarkeit habe.

Quelle

2010-07-06 Nick

Können Sie das Markup auch hinzufügen? Vielleicht liegt das Problem beim Markup. –

Ok Ich habe mit etwas mehr Code aktualisiert – Nick

@Nick Hey du hast es funktioniert? Bitte teilen Sie den Code mit. –

-1

Dies könnte durch die Abmessungen Ihres Sprites (Sprites) verursacht werden. Eine vollständige Beschreibung und mögliche Lösungen finden Sie unter http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk.

Quelle

2010-11-24 02:32:47 s1mm0t

dies ablehnen, da die URL nicht mehr gültig ist. – KenB

Wenn Sie auf einem iPhone/iPad "blättern", scrollen Sie scheinbar nicht wie bei einem Desktop-Browser durch die Seite. Was Sie tun, ist mehr wie das Verschieben der gesamten Seite in einem Ansichtsfenster. (Ich bin mir sicher, dass jemand mich korrigieren wird, wenn ich die falsche Terminologie hier verwende.)

Das bedeutet, dass background-position: fixed immer noch "unterstützt" wird, aber keinen wirklichen Effekt hat, da sich die ganze Seite bewegt das Ansichtsfenster und nicht der Seiteninhalt, der innerhalb der Seite scrollt.

Quelle

2010-12-06 16:35:50 Squig

Ich habe dieses Problem und ich bin Adressierung durch loszuwerden meine feste Fußzeile eines separaten Stil mit wie hier erwähnt: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Quelle

2011-01-19 19:19:01

Das iPhones/Webkit-Browser in dem Body-Tag nicht align Bilder Hintergrund, wenn platziert zentriert . Die einzige Möglichkeit ist, das Hintergrundbild von Ihrem Body-Tag zu entfernen und ein zusätzliches DIV als Wrapper zu verwenden.

#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>

Quelle

2011-02-27 17:28:57 Jimbola

Es wird

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

mit arbeiten und noch

background-position: center top;

für andere Browser hinzufügen.

Quelle

2013-08-22 11:03:30 leymannx

eine Wrapper-ID erstellen in den Körper zu bringen, schließen Sie dann den folgenden 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; 
}

Einfach sicher, dass keiner der Inhalte innerhalb des div sonst geht die ganze Seite wird ohne Scrollen fixiert werden.

Quelle

2015-01-13 09:44:56 lg365

CSS Hintergrund-Position funktioniert nicht in Mobile Safari (iPhone/iPad)

Antwort

Verwandte Themen