HTML5: Bild statt Farbe als HTML-Hintergrund

Im heutigen Artikel zeige ich Ihnen, wie Sie statt einer Hintergrundfarbe ein vollflächiges Bild als HTML-Hintergrund einstellen können.

Zu diesem Artikel

Schwierigkeitsgrad: Fortgeschritten
Benötigte Zeit: ca. 10 Minuten
Ziel: Sie erfahren, wie Sie für Ihr Projekt einen HTML-Hintergrund nutzen können.
Titelbild_hintergrund

Das Problem

In diesem Artikel habe ich Ihnen bereits gezeigt, wie Sie die Hintergrundfarbe für Ihre Veröffentlichung einstellen können. Diese können Sie sowohl für SWF- als auch HTML5-Veröffentlichungen einstellen. In manchen Projekten bietet es sich jedoch an, einen Hintergrund zu verwenden, der über eine einfache Farbe hinaus geht, z. B. ein Hintergrund mit einem “Blur-Effekt”. Im Skin-Editor in Captivate können Sie jedoch nur eine Farbe einstellen.

Farbe als HTML-Hintergrund

Die Lösung

Im Folgenden erfahren Sie, wie Sie bei einer HTML5-Veröffentlichung den Code anpassen und statt Farbe ein Hintergrundbild einstellen können:

  1. Veröffentlichen Sie Ihr Projekt in HTML5.
  2. Navigieren Sie im Ordner des veröffentlichten Projekts in den Unterordner assets > css.
  3. Öffnen Sie die Datei CPLibraryAll.css mit einem Texteditor Ihrer Wahl, z. B. Notepad++.
  4. Suchen Sie nach dem Ausdruck „.cpMainContainer.“
    Hinter diesem Ausdruck finden Sie einen weiteren Ausdruck in geschweiften Klammern, den Sie verändern müssen. 

     

Zu ändernder Ausdruck
  1. Ersetzen Sie den Ausdruck „background-color:#___“ durch background-image:url(“hintergrund.jpg”).
    Bei dem Ausdruck hintergrund.jpg handelt es sich um einen beispielhaften Dateinamen. Fügen Sie an dieser Stelle den Namen Ihrer Bilddatei ein. 

     

Geänderter Ausdruck
  • Speichern und schließen Sie die Datei.
  • Kopieren Sie Ihre Bilddatei anschließend in den Unterordner assets > css.
  • Testen Sie das Ergebnis im Browser, indem Sie auf die Datei index.html doppelklicken.
  • Bild als HTML-Hintergrund

    Quelle des Hintergrundbildes: Blurred Backgrounds by Dreamstal.

    2 Gedanken zu „HTML5: Bild statt Farbe als HTML-Hintergrund“

    1. Hallo Herr Uhrig,

      das klingt ja interessant! Wie genau skaliert denn das Bild mit dem Browserfenster? Sollte das Bild bestimmte Maße haben, damit es beim verkleinern des Browserfensters nicht verzerrt wird?

      VG
      Marc S.

      Antworten
      • Hallo Marc,
        standarmäßig interpretiert der Browser die Größe des Hintergrundbildes mit dem Wert “auto” (background-size: auto;). Dies bedeutet, dass die Maße der Grafik beibehalten werden. Ist die Grafik also kleiner als das Browserfenster, wird die Grafik wie in einem Muster immer wieder dupliziert, bis die Fläche ausgefüllt ist.
        Damit die Grafik automatisch skaliert, müssen Sie als Wert für das Attribut background-size entweder “contain” oder “cover” einsetzen. Eine mögliche Lösung wäre also:
        cpMainContainer{background-image:URL(“hintergrund.jpg”); background-size: cover;}
        Beim Skalieren mit “contain” wird die Grafik ggf. verzerrt, wenn das Seitenverhältnis nicht übereinstimmt. Beim Skalieren mit “cover” entstünden in diesem Fall ungefüllte Flächen. Aus diesen Gründen würden wir Ihnen deshalb empfehlen, in keinem der beiden Fälle mit einem Motiv als Hintergund zu arbeiten.
        Beste Grüße
        Das tecwriter-Team

        Antworten

    Schreibe einen Kommentar

    Newsletter abonnieren

    Automatisch über neue Captivate-Versionen, Updates und neue Bücher informieren lassen:



    Kommende Trainings

    13.09. – 16.09.2022
    Adobe Captivate Masterkurs

    14.09. – 15.09.2022
    Adobe Captivate für Einsteiger

    18.10. – 21.10.2022
    Adobe Captivate Masterkurs

    19.10. – 20.10.2022
    Adobe Captivate für Einsteiger