Background-size:cover auf IPhone

Moin,

stimmt - das sehe ich jetzt erst - es sind ja 3 Blöcke.

Ich bin jetzt mit JavaScript nicht so fit - frage doch mal Klaus oder Werner.

Es müsste doch eigentlich möglich sein da z.B. die gesamte neue CSS für das IPhone direkt mit an das JavaScript für die zeitgesteuerten Bilder zu schreiben.

https://www.w3schools.com/js/js_htmldom_css.asp

Das hatte doch Werner auch ursprünglich so direkt da ran geschrieben - leider finde ich das bei mir nicht mehr.

... also diese CSS:

Code: Alles auswählen

div::before {
  content: ' ';
  display: block;
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 0;
}

an das Skript unten bei "style" mit ran schreiben:

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
 let heute = new Date();
 let stunde = heute.getHours();
 let bild = `images/nachts.jpg`;
 if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
 if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
 if (stunde >= 10 && stunde <= 15) bild = `images/mittags.jpg`;
 if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
 document.getElementById("bild").style = `background-image: url(${bild})`;
</script>

... also dann zusammen ungefähr so (keine Ahnung, ob das richtig wäre):

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
  let heute = new Date();
  let stunde = heute.getHours();
  let bild = `images/nachts.jpg`;
  if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
  if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
  if (stunde >= 10 && stunde <= 15) bild = `images/mittags.jpg`;
  if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
  document.getElementById("bild").style = `
  background-image: url(${bild});
  content: ' ';
  display: block;
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 0;  
  `;
</script>

... und mein eigenes MP4-Hintergrundvideo hat auch den Test für das IPhone bestanden (Deine Seite habe ich jetzt nicht nochmals geprüft).

Also - ich habe das jetzt mal (ganz ohne JS Kenntnisse) bei mir zum Testen eingebaut und es geht

... da bin ich selbst sehr überrascht

https://www.mobirise-tutorials.com/Tuto ... ilder.html

Ich werde das eventuell wieder zurück bauen oder mein Tutorial restlos zur Verwirrung umschreiben.

Hier der Test am IPhone12:

Was habe ich gemacht:

Dieses JavaScript für meine zeitgesteuerten Bilder in den Bereich "End of <body> code" von den Seiteneinstellungen:

Code: Alles auswählen

  <!-- Skript Wechselbilder -->
  <script>
        let heute = new Date();
        let stunde = heute.getHours();
        let bild = `images/nachts.jpg`;
        if (stunde >= 22 && stunde <= 3) bild = `images/nachts.jpg`;
        if (stunde >= 4 && stunde <= 9) bild = `images/morgens.jpg`;
        if (stunde >= 10 && stunde < 11) bild = `images/mittags.jpg`;
        if (stunde >= 11 && stunde < 12) bild = `images/mittags2.jpg`;
        if (stunde >= 12 && stunde < 13) bild = `images/mittags3.jpg`;
        if (stunde >= 13 && stunde < 14) bild = `images/mittags4.jpg`;
        if (stunde >= 14 && stunde < 15) bild = `images/mittags5.jpg`;
        if (stunde >= 15 && stunde < 16) bild = `images/mittags6.jpg`;        
        if (stunde >= 16 && stunde <= 21) bild = `images/abends.jpg`;
        document.getElementById("bild").style = `
        background-image: url(${bild});
        content: ' ';
        display: block;
        background-position: center;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        z-index: 0;  
        `;
  </script>

Meine HTML (mit Text und Overlay drüber):

Code: Alles auswählen

   <!-- Start HTML für Hintergrundbild -->
    <header>

    <!-- Dieses <div> erzeugt das transparente Overlay, das man in der CSS modifizieren kann -->
    <div class="overlay"></div>

    <!-- zeitgesteuerte Bilder von Werner-Zenk.de -->
    <div id="bild"></div>

    <!-- Dies ist der Inhalt im Header, der dann auch mit Mobirise modifiziert werden kann -->
    <div class="container h-100">
      <div class="d-flex h-100 text-center align-items-center">
        <div class="w-100 text-white">
          <h1 class="display-2"><br><b>Hintergrund Bilder</b></h1>
            <p class="lead mb-0"><br><br>Nach Tageszeit wechselnde Bilder<br><br>Wechsel um 4:00 Uhr, 10:00 Uhr - 6 Bilder, 16:00 Uhr und 22:00 Uhr<br><br><a href="Wechselbilder.html#Tutorial" class="text-warning">Tutorial der Wechselbilder&nbsp;<span class="mobi-mbri mobi-mbri-down mbr-iconfont"></span></a><br><br><a href="Video-Background.html#Video-Textblock" class="text-warning"></a><a href="Video-Background.html#Video3" class="text-warning"></a><a href="Wechselbilder.html#Bilder" class="text-warning">Ansicht aller hier erscheinenden Bilder&nbsp;<span class="mobi-mbri mobi-mbri-down mbr-iconfont"></span></a><br><br><br><a href="https://www.mobirise-tutorials.com/BusinessM4/Fullscreen-Video.html" class="text-white" target="_blank"></a><a href="Wechselbilder.html#Google" class="text-white" target="_blank">Translate this page&nbsp;<span class="mdi-action-translate mbr-iconfont"></span></a></p>
         </div>
       </div>
    </div>
         
    </header>
    <!-- Ende HTML für Hintergrundbild -->

Meine zusätzliche CSS für den Header-Inhalt und das Overlay im "CSS Editor":

Code: Alles auswählen

background-repeat: no-repeat;
header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
header .container {
  position: relative;
  z-index: 2;
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.1;
  z-index: 1;
}

Screenshot vom "Code Editor":

Da das ja bei Dir über 3 Blöcke laufen soll, könnte ich mir denken, dass es am einfachsten wäre das nicht über die ID sondern z.B. über eine Class zu steuern wie:

document.getElementsByClassName("bild")

... und Du dann entsprechend da anstelle der ID diesen Teil im JavaScript umschreibst und diese Class bei allen 3 Blöcken dran schreibst, also dann wahrscheinlich so:

<div class="bild"></div>

Bin noch nicht wach - gibt mir nen paar Minuten.
Muss noch Kartoffeln kochen...

Moin

z-index: 0;

reicht auch und ich habe meiner Seiten-CSS noch einen schwarzen Hintergrund gegeben, sodass man das alles auf der Arbeitseite etwas "schöner" sehen kann - und vielleicht so auch besser, falls das Hintergrundbild mal nicht lädt.

Moin Tommy!
Fast schon Weihnachten...

Du hast Dich von dem :before verabschiedet?

Ja - ich habe mir überlegt - wieso - wo vor denn?

... und da ich das mit dem ::before :before oder wie auch immer sowieso nicht so ganz richtig verstehe - brauche ich das auch nicht

Habe mein Tutorial inzwischen auch angepasst:

https://www.mobirise-tutorials.com/Tuto ... ilder.html

Das ist natürlich weise.
Irgendwo liegt bei mir noch ein Z-Index falsch. Ich sehe nur schwarz.
https://www.pfrommer-gmbh.de/test/

Aber die folgenden beiden Blöcke haben das korrekte Bild. Die sind einfach nur transparent, ohne JavaSchnickschnack

stelle den mal im JavaScript um von jetzt:

z-index: -10;

auf dann:

z-index: 0;

... bei Deiner Seite blicke ich so schnell auch nicht gleich am Quelltext durch. So wie Du dsa Skript jetzt verwendest ist es ja nach ID - eine ID muss einmalig auf der Seite sein - sonst geht das nicht.

Habs auch gerade gefunden...

Ich finde es absolut klasse, mit Dir zu reden/schreiben.

Von einer anderen uns bekannten Person hört man immer nur: (was ich nicht kann) braucht doch keiner!

Die ID ist einzigartig - die anderen Blöcke sind ja nur trans

War es das mit dem z-index? Ich habe nämlich da ziemlich viel rum probiert und weiß es schon gar nicht mehr

Geht es jetzt? Versuche mal mit der Class anstelle der ID, dann sollte das doch auch an allen 3 Blöcken funzen.

Berichte dann mal ...

Alles OK nun.
Die ID (idWechselbild) brauchte ich nicht durch eine Klasse ersetzen.
Dadurch, dass das Wechselbild FIXED ist, bleibt es ja ewig an der gleichen Stelle.
Die folgenden beiden Blöcke sind also nur transparent.

ah ja - klar - logisch. Das ist ja noch viel besser. Prüfe auch mal an diesem IPhone Prüfer.

Prima - das hilft sicherlich auch mal an anderer Stelle weiter

Apfeltester sagt OK

Na dann: Frohes Fest

Das wünsche ich Dir auch - und mache mal 'ne Stunde Pause

Pause kann ich momentan nicht ab...Du weist ja...

So nebenbei:
wenn Du in Deinem Header das Mobi-Bild als Hintergrund einträgst, kann man etwas mehr in Mobi selbst damit anfangen.
Ich kann Schriften so besser einschätzen

Code: Alles auswählen

header {
  position: relative;
  background-image: url(@bg-value);
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

ja - sehr gute Idee - da ist das etwas anschaulicher auf der Arbeitsseite von Mobirise

Dann erscheint aber auch - bei einem eventuell langsamen Laden der Seite - das dort als URL angegebene Bild, bevor das eigentliche Bild angezeigt wird. Das ist dann sozusagen ein "Fallback-Image".

Ich verwende da aber einen ganz einfachen Textblock, insofern habe ich da jetzt die absolute URL zu einem der Bilder eingetragen, weil es da solche Variablen (@bg-value) gar nicht gibt:

Code: Alles auswählen

header {
  position: relative;
  background-image: url(https://www.mobirise-tutorials.com/Tutorials/images/nachts.jpg);
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

Ich habe jetzt auch nochmals einen Test von Deiner Problem-Seite gemacht - scheint alles zu funktionieren - alle 3 Blocks mit dem fixierten Hintergrundbild und auch das Video

Ja, alles hervorragend.

Vielen Dank.

Was aber irgendwie nicht klappt in meiner Eierseite.
https://www.afripix-web.de/webdesign-gu ... h-eier.php

3 verschiedene gefixte Hintergrundbilder hintereineinder....
Mal was zum Kopfzerbrechen für nach Weihnachten (oder für mich über Weihnachten)

Wenn ich Deine Technik nutze (ohne das Wechselbild), müsste id Bild dann so aussehen

Code: Alles auswählen

header #bild {
  width: 100%;
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background-image: url(@bg-value);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
}

Die Section an sich braucht dann noch ein z-index=0

Nur dann gibt es den Effekt: der letzte gewinnt.

Moin,

warum denn eine ID - erstelle das doch einfach als class="bild" und schreibe dann diese Class an den Selektor <header> mit dran oder ersetze die jetzige ID als Class:

Code: Alles auswählen

header.bild {
    width: 100%;
    position: fixed;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    z-index: 0;
    background-image: url(@bg-value);
    background-size: cover;
    background-position: center center;
}

Das ganze Browser-Gedöns braucht man heute eher nicht mehr. Habe das jetzt aber nicht irgendwie ausprobiert.

Ich würde es aber eher mal so probieren:

Code: Alles auswählen

header.bild {
    background-image: url(@bg-value);
    display: block;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 0;
}

Mobirise-Tutorials.com

Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Re: Background-size:cover auf IPhone

Wer ist online?