HDTutorial
DE
so fügt man ein Hintergrundbild in HTML ein

Die Wiedergabe lädt den eingebetteten YouTube-Player (erweiterter Datenschutzmodus).

so fügt man ein Hintergrundbild in HTML ein

580.078 Aufrufe 25. Oktober 2016 4:36

Auf YouTube ansehen
KanalCode Grammar

Kapitel

Beschreibung des Urhebers

In diesem HTML-Tutorial lernst du, wie du mit CSS Hintergrundbilder auf einer Webseite einbindest. Du siehst, wie du Farben setzt, Bilder einfügst, die Fliesenfunktion steuerst und Bilder so skalierst, dass sie den gesamten Browser ausfüllen.

Diese CSS-Anleitung behandelt:
Hintergrundfarben mit inline-CSS setzen
[background-image: url()] mit einem Bild aus dem Web nutzen
Wiederholungsverhalten mit [no-repeat] steuern
Bilder mit [background-size] skalieren (100%, 75% usw.)
Über die gesamte Breite und Höhe dehnen
CSS von inline-[style]-Attributen in den [style]-Tag verschieben für sauberen Code

Dieses Tutorial ist perfekt für Anfänger und zeigt Schritt für Schritt, wie du den Hintergrund deiner Webseite mit Bildern statt mit einfachen Farben professionell gestaltest.

⏱️ Zeitstempel

00:00 – Einführung: Hintergründe in HTML
00:21 – Zwei Methoden: style-Tag vs. inline-style-Attribut
00:30 – Hintergrundfarbe hinzufügen (schwarz, gelb usw.)
01:01 – [background-image: url()] mit externen Bildern nutzen
01:19 – Beispiel mit gefliestem Hintergrund
01:43 – [no-repeat] verwenden, um ein einzelnes Bild anzuzeigen
02:12 – Hintergrund mit [background-size: 100%] dehnen
02:41 – X und Y unabhängig skalieren (100% 100%, 75% usw.)
03:26 – Beste Praxis: CSS von inline-style in den [style]-Tag verschieben
04:00 – Organisierter Code vs. schnelle inline-Änderungen
04:26 – Zusammenfassung und Fazit

🏷️ Tags
html-anleitung,html-hintergrundbild,css-hintergrundbild-tutorial,background-image-html,css-hintergründe,background-size-cover,background-no-repeat,html-anfänger-tutorial,css-tutorial-für-anfänger,hintergrund…

Über dieses Tutorial

Code Grammar hat dieses 4:36 lange Video-Tutorial am 25. Oktober 2016 veröffentlicht. Es wurde 580.078-mal auf YouTube angesehen.

Kategorie
Bildung
Dauer
4:36
Veröffentlicht
25. Oktober 2016
Aufrufe
580.078
Likes
3.501

Teilen

Weiterführende Links

  • Ein Hintergrundbild zu einer benutzerdefinierten HTML-Vorlage ... mailchimp.com

    Ein Hintergrundbild zu deiner benutzerdefinierten HTML-Vorlage hinzufügen Dieser Prozess verwendet zum Anzeigen eines Hintergrundbilds und einer Hintergrundfarbe CSS, HTML und VML. Du fügst unseren Beispielcode in deine…

  • HTML: Hintergrundbild einbinden - so geht's - CHIP praxistipps.chip.de

    Das "style"-Attribut verweist auf den Stylesheet-Gedanken, der Trennung von Layout und Inhalt. Noch eleganteres HTML-Programmieren erreichen Sie, wenn Sie das Design und Layout von den Inhalten wirklich abkapseln. Das g…

  • Wie füge ich ein Hintergrundbild in eine Nachricht ein ... getresponse.com

    Sektion-Hintergrundbild hinzufügen. Um ein Hintergrundbild nur für eine einzelne Sektion einzufügen: Klick im Nachrichten-Editor auf die entsprechende Sektion, um die Einstellungen der Sektion zu öffnen. Wähle unter Eig…

Dieses Tutorial in anderen Sprachen