Auf IOS-Safari wird Hintergrundbild nicht fixiert

Antworten
#1
29.03.2018 09:31
avatar  Sigi
#1
Si
Sigi

Hallo zusammen,

ich habe ein Problem. Mit:

1
2
3
4
5
6
7
8
 
<style type="text/css">
/*<![CDATA[*/ 
 
.jqbga-slider--image, .jqbga-web--image {
  background-attachment: fixed;          
}
   /*]]>*/ 
</style>
 



habe ich das Hintergrundbild fixiert und dies wird auch im normalen Browser korrekt umgesetzt. Schaue ich mir die Seite jedoch über das iPad und iPhone an, ist das Hintergrundbild leider nicht fixiert. Ich habe da heute bereits lange im Internet gesucht. Aber alle Lösungen die da angegeben waren, haben mich nicht weiter gebracht. Ich bin da auch Anfänger im CSS-Bereich. Kann mir da Jemand helfen?

Vielen Dank,
Sigi


 Antworten

 Beitrag melden
#2
29.03.2018 14:33
avatar  az_
#2
avatar
az_

...das ist normal, iOS kann kein fixed bei background. Immerhin können wir den Zoom-Effekt fixen: https://expanding.jimdo.com/hacks/fix-io...ackground-zoom/

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#3
30.03.2018 19:45
avatar  Sigi
#3
Si
Sigi

Schade, dass ein fixed bei background nicht funktioniert. Habe mal im Internet gesucht. Es gibt wohl nee jQuery Lösung unter:

jQuery Lösung

und eine Cross-Browser-Lösung unter:

Cross-Browser-Lösung

Habe aber leider beides nicht hinbekommen.


 Antworten

 Beitrag melden
#4
16.04.2018 16:57
avatar  hdlukas
#4
hd
hdlukas

Moin,
ich habe damit bei Jimdo kein Problem. Auf www.region-hamburg.de/landkreis ist auch auf dem ipad der Hintergrund fixiert. Nur bei wordpress funktioniert das bei mir nicht.


 Antworten

 Beitrag melden
#5
16.04.2018 22:21
avatar  Sigi
#5
Si
Sigi

und wie hast Du das hinbekommen?


 Antworten

 Beitrag melden
#6
17.04.2018 11:01 (zuletzt bearbeitet: 17.04.2018 11:46)
avatar  az_
#6
avatar
az_

In der Tat! Scheint so, als hätten die Apple-Entwickler nachgebessert! Ich habe es gerade eben mal auf dem Rome-Design durchgespielt und stimmt: es funktioniert jetzt auch auf iOS.

- https://designtest-rome.jimdo.com/images/

Allerdings ist das eine modifizierte Version von Rome. Ich muss den Code erst noch auf einem neutralen Design testen, bevor ich ihn hier poste.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#7
17.04.2018 12:26
avatar  az_
#7
avatar
az_

Für Rome funktioniert folgender Code:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 

<style type="text/css">
/* <![CDATA[ */
/* fixed Background */
 
    .jtpl-header--image.jqbga-container.jqbga-web--image {
        position: fixed !important;
        height: 741px !important;
        width: 100vw ;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .jtpl-section-main {
        margin-top: 741px;
        padding-bottom: 50px;
    }
 
@media (max-width:767px) {
    
    .jtpl-top-bar.navigation-colors {
        position: fixed !important;
    }
 
    .jtpl-header {
        position: relative;
        z-index: 10;
        top: 60px;
        width: 100%;
        z-index:0;
    }
    .jtpl-header--image.jqbga-container.jqbga-web--image {
        position: fixed !important;
        height: 380px !important;
        width: 100vw ;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .jtpl-section-main {
        margin-top: 300px;
        padding-bottom: 50px;
    }
}
/*]]>*/
</style>
 



...gestestet auf https://redesign-designtest-rome.jimdofree.com/

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#8
17.04.2018 15:20 (zuletzt bearbeitet: 17.04.2018 15:23)
avatar  Sigi
#8
Si
Sigi

Das funktioniert auch soweit.

Jetzt gibt es bei mir allerdings ein weiteres Problem. Ich habe Parallax 3 eingebaut. Also insgesamt darüber drei Spalten wo auch ein Hintergrundbild hinterlegt ist. Angesprochen und bearbeitbar werden die Spalten so wie ich das sehe über .bgimg-7

Da steht aktuell im Header:

1
2
3
4
5
6
 
.bgimg-6, .bgimg-7 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 



und

1
2
3
 
.bgimg-7 {
  background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/s1e7b7e285b174df5/image/ifd6472d6b5bd7fce/version/1522446437/image.jpg");
  min-height: 50px;
 



Ich kriege das background-image der drei Spalten allerdings über IOS nicht fixiert, über den PC und dessen Webbrowser schon.



Ist doof zu erklären. Am besten einfach mal anschauen unter www.bueroassistenz-krieger.de

Gibt es dafür eine Lösung?


 Antworten

 Beitrag melden
#9
19.04.2018 08:13
avatar  az_
#9
avatar
az_

Du hast im CSS folgendes stehen:

1
2
3
4
5
6
 
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}
 



...versuch mal, was passiert, wenn Du scroll auf fixed änderst

LG, az

PS: ...bitte poste mal den Link zu Parallax 3


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#10
19.04.2018 08:47
avatar  Sigi
#10
Si
Sigi

Habe das CSS sogar noch um .bgimg-7 ergänzt, also so:

1
2
3
4
5
6
 
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-7 {
        background-attachment: fixed;
    }
}
 



Leider keine Veränderung im IOS-Browser

Ich habe den Link zu Parallax nicht mehr. Bin mir jetzt auch unsicher, ob es Parallax 3 war. Aber eigentlich schon, denn die Dateien sind anders als bei Parallax 1.5.0. Kannst Dir aber gerne das komplette Paket was ich runtergeladen habe, von meiner Webseite laden. Habe ich da mal gerade hochgeladen:

Parallax


 Antworten

 Beitrag melden
#11
19.04.2018 22:08
avatar  hdlukas
#11
hd
hdlukas

Hat auf Anhieb funktioniert, ohne dass ich etwas gemacht habe. Zumindest mit dem Theme Barcelona.


 Antworten

 Beitrag melden
#12
19.04.2018 22:11
avatar  Sigi
#12
Si
Sigi

mhhhh, leider habe ich "Rome" in Verwendung.


 Antworten

 Beitrag melden
#13
22.04.2018 11:52 (zuletzt bearbeitet: 22.04.2018 11:59)
avatar  az_
#13
avatar
az_

...langsam verstehe ich, worum es geht.

Das das bei Dir nicht funktioniert, liegt nicht am Design, sondern am Parallax-3. Der Entwickler/Autor hatte die Einstellung für iOS absichtlich auf "scroll" gesetzt, weil bei dieser Version sonst der Zoom-Fehler zuschlägt. Übrigens geht das CSS zu vereinfachen: https://all-blogdesigns.jimdo.com/parallax-3/files/ (...ich hab auch noch ein paar Fehlerchen beseitigt)

LG, az

PS: das gleiche habe ich bei https://hausjaeger-paralllax.jimdo.com/ auch machen müssen. Immerhin klappt da der Effekt beim Header-image.


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#14
22.04.2018 17:40
avatar  Sigi
#14
Si
Sigi

Schade, dass es bei Parallax-3 nicht funktioniert. Vielleicht gibt es ja noch irgend eine Lösung. Eigentlich gibt es für alles eine Lösung, oder?


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!