Johanna Böhm: Hintergrundbild

Hallo zusammen!

Meine (erste selbstgeschriebene) Seite (facefun.de) in HTML5 funktioniert am PC problemlos, am Handy wird aber das Hintergrundbild nicht angezeigt. In einer früheren Version ohne "Doctype" wird das Hintergrundbild korrekt dargestellt. Ich habe diese Version unter index1 auch mal ins Netz gestellt.

Was ist an der Version mit "Doctype" falsch?

Danke für Tipps und Hilfen!

  1. Hallo Johanna Böhm,

    Danke für Tipps und Hilfen!

    Gestalterisch finde ich die Seite sehr gelungen. Aus technischer Sicht ist sie leider schlecht.

    Schau dich mal hier um: https://wiki.selfhtml.org/wiki/HTML/Tutorials

    Ein Grundgerüst sollte so aussehen: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundgerüst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige Das fehlende <meta viewport> könnte Ursache sein.

    Aber ich würde empfehlen, die Seite einzureißen und nochmal neu zu beginnen.

    Bei Fragen dazu bekommst du hier sicher Unterstützung.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. [Vollzitat entfernt]

      Viewport ist im Quelltext doch vorhanden!? An das Grundgerüst habe ich mich doch auch gehalten!?

      index.htm ist gem. W3C Prüfung fehlerfrei, stellt das Hintergrundbild am Handy aber nicht dar. Lasse ich doctype weg, baue also einen Fehler ein, wird das Hintergrundbild korrekt dargestellt. Das verstehe ich nicht.

      1. Aus technischer Sicht ist sie leider schlecht.

        Viewport ist im Quelltext doch vorhanden!? An das Grundgerüst habe ich mich doch auch gehalten!?

        index.htm ist gem. W3C-Prüfung fehlerfrei

        Du kannst einen Text (hier: Code) grammatikalisch korrekt aufbauen, aber er ergibt trotzdem keinen Sinn: "Johanna klingelt gelb oben naß trocken das Gerüst".

        Es geht um Auswüchse wie die Ketten aus zwei Dutzend <br /> oder leere Absätze (<p>) – für Abstände sind CSS-seitig margin und padding da, dazu musst du nicht HTML-Elemente missbrauchen.

        stellt das Hintergrundbild am Handy aber nicht dar.

        Kann ich hier nicht nachvollziehen. Deine Seite müsste auf dem Handy so erscheinen, wie sie in einem klein gezogenen Browserfenster erscheint.

        Du hast aber Probleme mit den ganzen <div>-Abschnitten. Auf einem kleinen Bildschirm möchtest du deinen Text ganz sicher nicht auf 40% der Bildschirmbreite haben, so dass in einer Zeile nur noch zwei Wörter stehen. Benutze besser max-width mit em oder cm als Maß, oder setze @media ein.
        Einigen Abschnitten verpasst du auch eine Hintergrundfarbe, eventuell überlagert diese auf deinem Handy das Hintergrundbild.

        1. Das mit den Absätzen werde ich korrigieren, sobald ich weiß wie (lebe zur Zeit noch in meiner HTML 1.0 Welt mit <body bgcolor="...> und muss mich an css erst gewöhnen). Zu dem Hintergrundbild: Es scheint, als ob es im chrom mobile falsch scaliert wird, wenn man den doctype auf html5 setzt (Hab ein bischen experimentiert mit der Position - das Bild ist wohl da, aber "außerhalb"). Im Firefox mobile sieht alles bestens aus. Ich weiß daher nicht mal, ob dieser spezielle Fehler überhaupt von mir stammt oder von Chrome. Mobile Version abfragen und auf eine Seite ohne HTML5 umleiten? Was meint ihr?

          1. Hallo Johanna,

            Zu dem Hintergrundbild: Es scheint, als ob es im chrom mobile falsch scaliert wird, wenn man den doctype auf html5 setzt (Hab ein bischen experimentiert mit der Position - das Bild ist wohl da, aber "außerhalb"). Im Firefox mobile sieht alles bestens aus. Ich weiß daher nicht mal, ob dieser spezielle Fehler überhaupt von mir stammt oder von Chrome. Mobile Version abfragen und auf eine Seite ohne HTML5 umleiten? Was meint ihr?

            Was spricht gegen background-size: contain?

            LG,
            CK

            1. Hallo Johanna,

              Zu dem Hintergrundbild: Es scheint, als ob es im chrom mobile falsch scaliert wird, wenn man den doctype auf html5 setzt (Hab ein bischen experimentiert mit der Position - das Bild ist wohl da, aber "außerhalb"). Im Firefox mobile sieht alles bestens aus. Ich weiß daher nicht mal, ob dieser spezielle Fehler überhaupt von mir stammt oder von Chrome. Mobile Version abfragen und auf eine Seite ohne HTML5 umleiten? Was meint ihr?

              Was spricht gegen background-size: contain?

              LG,
              CK

              --
              > https://wwwtech.de/about Nichts. Ich verwende ja auch "contain".

              Nichts. Ich verwende ja auch "contain".

              1. Hallo Johanna,

                Nichts. Ich verwende ja auch "contain".

                Dann stimmt etwas mit deinem Viewport nicht.

                So, hab mir das jetzt mal angeschaut. Erstens ist das Hintergrundbild sichtbar und es wird korrekt skaliert. Und zweitens kann ich vertikal scrollen, du siehst also das Hintergrund nicht weil es ausserhalb des Viewports im scrollbaren Bereich ist. Du musst dafür sorgen, dass nicht vertikal gescrollt werden muss um das Hintergrundbild vollständig sehen zu können.

                LG,
                CK

                1. [Vollzitat entfernt]

                  Leider weiß ich jetzt trotzdem nicht, was zu tun ist. Wie kann ich das bei viewport so einstellen, dass die Seite auf dem Handy genau so aussieht wie am PC (oder so wie bei facefun.de/index1.htm)??? Danke schon mal!

  2. Hallo zusammen!

    Meine (erste selbstgeschriebene) Seite (facefun.de) in HTML5 funktioniert am PC problemlos, am Handy wird aber das Hintergrundbild nicht angezeigt. In einer früheren Version ohne "Doctype" wird das Hintergrundbild korrekt dargestellt. Ich habe diese Version unter index1 auch mal ins Netz gestellt.

    Was ist an der Version mit "Doctype" falsch?

    Danke für Tipps und Hilfen!

    Nachtrag:

    Mit einem <div> und "position: fixed;" konnte ich das problem zwar lösen, aber der <div> ist dann penetrant im Vordergrund und lässt sich auch nicht mit z-index in den Hintergrund bringen...

    Irgendwie ist immer der Wurm drin :-((

    1. [Vollzitat entfernt]

      Ach ja, die Datei heißt facefun.de/index3.htm

      1. Hallo

        Du hast zwei grundsätzliche Probleme die eine funktionierende Seite verhindern und meist sehr schwer zu beseitigen sind:

        1. Der Quellcode ist Schrott. Grundlage für ein funktionierendes Layout ist ein schlichter sauberer HTML-Quellcode mit Elementen, die gemäß ihrer Bestimmung verwendet werden.

        dass die Seite auf dem Handy genau so aussieht wie am PC

        Das funktioniert schlicht nicht und hat mit aktuellem Layout nichts zu tun. Entscheidend ist dass die Endgeräte alle wichtigen Informationen freigeben. Du solltest deine Besucher nicht für Idioten halten.

        Unter diesen Vorgaben wird zunächst eine einfache funktionierende Seite erstellt, die auf möglichst vielen Endgeräten funktioniert. Danach können die Verschönerungen eingebaut werden.

        Gruss

        MrMurphy

        1. [Vollzitat entfernt]

          "Der Quellcode ist Schrott." Das hilft mir nicht weiter und geht immer noch nicht auf meine Frage (vgl. Anfang) ein. Ich habe die Seite mit einer Abfrage versehen, die zumindest einen Großteil der Nutzer von Mobilgeräten umleitet. Der Rest kann dann wohl auch ohne Hintergrundbild leben.

          Trotzdem Danke für die vielen Tipps und Hinweise zu gutem HTML.

          1. Hallo

            Anfängern ist leider nur schwer zu erklären, warum ein Quelltext Schrott (deutlich ausgedrückt) oder aus technischer Sicht leider schlecht (freundlich ausgedrückt) sein soll.

            Ich habe mal einen für mich sauberen Quelltext erstellt. Dabei gibt es natürlich immer zu diskutierende Kleinigkeiten. Den kannst du gerne mit deinem vergleichen.

            <body>
               <nav>
                  <a href="#schminkfarben">Farben</a>
                  <a href="#kosten">Kosten</a>
                  <a href="#kontakt">Kontakt</a>
                  <a href="#bilder">Bilder</a>
               </nav>
               <header>
                  <figure>
                     <img src="http://facefun.de/t.jpg" alt="Facefun-Schriftzug">
                  </figure>
               </header>
               <main>
                  <section>
                  <h1 class="unsichtbar">Facefun</h1>
                  <p>"Lass dich mit Pinsel und Farben verzaubern"</p>
                  <p>Egal ob es um einen Geburtstag, ein Fest oder eine Vorführung geht, schon in wenigen Minuten verwandeln sich Kindergesichter in Piraten, Feen, Katzen oder beliebige andere Charakterfiguren. Passend zu jedem Anlass schminke ich Kinder auch thematisch zusammenhängend, zum Beispiel zu Märchen, Geschichten oder Fantasy-Spielen. Warum nicht einmal ein Kindergeburtstag mit Findus und seinen Freunden?</p>
                  <p>Fröhliche geschminkte Kindergesichter bringen Farbe in Ihre Feier oder Veranstaltung. Ich würde mich freuen, bei deren Gestaltung mitwirken zu können.</p>
                  <p>Ihre</p>
                  <address>Johanna Böhm</address>
                  </section>
                  <section>
                     <hr id="schminkfarben">
                     <h2>Schminkfarben</h2>
                     <p>Kinderhaut liegt mir am Herzen, deshalb verwende ich ausschließlich dermatologisch getestete, fettfreie und wasserlösliche Schminkfarben ohne Parfumstoffe, Gluten, Arsen, Antimon oder Schwermetalle gemäß Spielwaren-Verordnung und nach den Richtlinien über die Sicherheit von Spielzeug in der EU.</p>
                     <p>Zusätzlich können sich die Kinder vorher ihr Gesicht eincremen. Während des Spielens sind diese Farben wischfester als Fettfarben und lassen sich auf Wunsch jederzeit einfach mit Wasser und Seife abwaschen.</p>
                  </section>
                  <section>
                     <hr id="kosten">
                     <h2>Kosten</h2>
                     <dl>
                        <dt>Kinderschminken bis 2 Stunden:</dt>
                        <dd>60 € / 90 Fr</dd>
                        <dt>Jede weitere angefangene halbe Stunde:</dt>
                        <dd>10 € / 15 Fr</dd>
                        <dt>Für private Feiern bis 12 Kinder:</dt>
                        <dd>60 € / 90 Fr</dd>
                     </dl>
                     <p>Alle Preise inklusive Material und Anfahrt im nachfolgend dargestellen Gebiet. Bei Aufträgen außerhalb fallen zusätzliche Fahrtkosten an.</p>
                     <figure>
                        <img src="http://facefun.de/plan.png" alt="Tätigkeitsgebiet ohne Anfahrtkosten">
                     </figure>
                  </section>
                  <section>
                     <hr id="kontakt">
                     <h2>Kontakt</h2>
                     <form id="formular" action="#" method="post">
                        <div>
                           <label for="name">Name</label>
                           <input id="name" name="name" type="text">
                        </div>
                        <div>
                           <label for="email">E-Mail</label>
                           <input id="email" name="email" type="email">
                        </div>
                        <div>
                           <label for="tel">Telefon</label>
                           <input id="tel" name="tel" type="tel">
                        </div>
                        <div>
                           <label for="nachricht">Nachricht</label>
                           <textarea id="nachricht" name="nachricht" rows="10"></textarea>
                        </div>
                        <div>
                           <button type="submit">Abschicken</button>
                        </div>
                     </form>
                  </section>
                  <section>
                     <hr id="bilder">
                     <h2>Bilder</h2>
                     <div>
                        <figure>
                           <img src="http://facefun.de/bilder/00.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/01.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/02.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/03.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/04.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/05.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/06.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/07.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/08.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/09.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/10.jpg" alt="Geschminktes Kind">
                        </figure>
                        <figure>
                           <img src="http://facefun.de/bilder/12.jpg" alt="Geschminktes Kind">
                        </figure>
                     </div>
                  </section>
               </main>
               <footer>
                  <p>E-Mail: info@facefun.de</p>
                  <p>Impressum</p>
                  <a href="http://facefun.de/">Originalseite: Facefun.de</a>
               </footer>
            </body>
            

            Der gesamte Quelltext der Seite ist für das Forum wohl zu groß, der Hintergrund färbt sich unangenehm rot. Deshalb ein Link zu einer Testseite zum direkten ausprobieren. Der gesamte Quelltext einschließlich des CSS befindet sich im Dateiquelltext.

            Facefun

            Ein paar Einstellungen müssen noch nachjustiert werden. Ältere Browser können für Flexbox eventuell noch ein paar Prefixe vertragen. Das ist aber nur etwas Fleißarbeit.

            Grundsätzlich sollte die Seite aber in allen aktuellen relevanten Browsern responsive funktionieren.

            Gruss

            MrMurphy

            1. Danke, das ist konstruktiv. Werde die Seite bei Zeiten überarbeiten. <nav> und ähnliche Tags gab es noch nicht, als ich früher mal (letztes Jahrtausend ;-)) programmiert habe. Dafür Framesets, die man heute nicht mehr nehmen soll. Es ist jetzt klar, was du genau meinst und wie ich die Seite verbessern kann. Vielen Dank nochmal dafür :-))