Hilfreiche Ratschläge

So erstellen Sie schnell und einfach ein Hintergrundbild mit HTML

Pin
Send
Share
Send
Send


Jedes Zimmer wird viel besser aussehen, wenn es mit teuren Perserteppichen bedeckt ist. Also, was ist das Schlimmste an Ihrer Website? Vielleicht ist es an der Zeit, seinen Boden mit einem teuren, eleganten, handgefertigten Palast zu „bedecken“. Wir werden genauer untersuchen, wie ein Hintergrund für die Site erstellt wird:

Bildauswahl

Ich möchte mit der Auswahl eines Bildes beginnen. Damit der Hintergrund auf der Seite gleichmäßiger und schöner aussieht, mussten Sie sich nicht mit den Abmessungen und der Ausrichtung befassen. Ich schlage vor, sofort nach einer nahtlosen Textur zu suchen. Was ist das?

Leider ist es nicht möglich, ein Bild in HTML auf Vollbild zu strecken. Das Foto wird in voller Größe verwendet. Wenn das Bild klein ist, wird es den gesamten Bereich wie im folgenden Screenshot ebnen. Um das Bild zu dehnen, müssen Sie ein zusätzliches CSS-Dokument erstellen, ohne das es nicht funktioniert.

Sie haben jedoch die Möglichkeit, sich im System zurechtzufinden. Verwenden Sie dazu Photoshop und passen Sie das Bild an die Breite des Bildschirms an (1280 x 720). In diesem Fall wird beim Scrollen nach unten das Bild durch ein anderes ersetzt.

Eine viel bessere Option, wenn Sie kein CSS verwenden möchten, ist die Verwendung nahtloser Texturen. Sie sehen keine Gelenke. Sie sind wie Tapeten oder moderne Fliesen im Design. Einer ersetzt den anderen und es sind keine Fugen sichtbar.

Wenn Sie an kostenlosen Bildern und den fehlenden rechtlichen Konsequenzen für ihre Verwendung interessiert sind, empfehle ich die Suche auf der Website Pixabay.com.

Nun arbeiten wir mit dem Code. Ich muss sofort sagen, dass wir jetzt mit HTML arbeiten, das heißt, wir ändern das Bild nicht für die gesamte Site, sondern nur für eine bestimmte Seite, für die der Code geschrieben wird. Wenn Sie an Änderungen an der gesamten Ressource interessiert sind, müssen Sie Code mit erstellen CSSAber dazu später mehr.

Damit Sie im Editor arbeiten können, bevorzuge ich NotePad ++. Es ist viel bequemer, darin zu arbeiten: Der Code wird für Sie hinzugefügt, die Tags werden hervorgehoben. Das Programm ist kostenlos und wiegt ca. 3 MB. Sehr zu empfehlen, besonders wenn Sie ein Anfänger sind.

Also im Tag Körper Sie müssen ein Attribut hinzufügen Hintergrund und geben Sie einen Link zu dem Bild an, von dem aus das Bild aufgenommen wird. So sieht es im Programm aus.

Sie können einfach den Notizblock öffnen und diesen Code kopieren. Fügen Sie in Anführungszeichen einen Link zu dem Bild ein, das Ihnen gefällt.

Bild als Seitenhintergrund - HTML

Betrachten Sie zunächst die Methode zum Festlegen des Hintergrundbilds auf der Site mithilfe des Attributs Hintergrund tag Körper:

Wie im obigen Beispiel wird empfohlen, zusätzlich zum Bild die Hintergrundfarbe anzugeben (diese wird beim Laden der Seite auf der Site angezeigt), die mit dem Hintergrundbild kombiniert wird und einen Kontrast zum Text auf der Site erzeugt. Wenn Sie beispielsweise die weiße Farbe des Texts auf der Site verwenden, sollten Sie eine dunkle Hintergrundfarbe angeben und ein dunkles Hintergrundbild festlegen. In diesem Fall ist der Text leicht zu lesen.

Hinweis: Es wird empfohlen, das Hintergrundbild und die Hintergrundfarbe nicht mit HTML, sondern mit CSS festzulegen. In diesem Fall ist der Code gültig und korrekter.

Bild als Seitenhintergrund - CSS

In CSS können die Hintergrundfarbe und das Hintergrundbild mit einer Eigenschaft festgelegt werden. Hintergrund:

Hier mit Eigentum Hintergrund-Anhang Seitenhintergrund wird behoben und die Eigenschaft verwendet Hintergrundwiederholung Die horizontale Bildwiederholung ist eingestellt. Es ist jedoch zu bedenken, dass das Hintergrundbild entlang der Kanten gut "zusammenheften" sollte.

Wenn Sie das Hintergrundbild auf die volle Größe des Browserfensters strecken möchten, verwenden Sie die Eigenschaft Hintergrundgröße: 100%,

Im Site Builder von Nubex können Sie für jede Site ein großes Bild als Hintergrund verwenden und korrigieren.

Hintergrund für die Website

Es kommt vor, dass das alte Site-Design bereits langweilig ist. Und ich möchte etwas Neues und Leckeres. Und das neue Design wird es sein, wenn Sie es selbst kochen.

Aber das gesamte Design der Ressource selbst komplett zu verändern, ist eine undankbare Sache. Und nicht jeder hat bei diesem Geschäft die Hände geschärft. Daher ist es am einfachsten, die alte Vorlage durch Ändern der Hintergrundfarbe der Ressource oder ihres Hintergrundbilds zu aktualisieren.

Es gibt verschiedene Möglichkeiten, den Hintergrund der Site zu ändern. Verwenden Sie dazu die Funktionen von CSS oder HTML. Viele der Eigenschaften für die Arbeit mit dem Hintergrund haben jedoch in diesen Webtechnologien denselben Namen und dieselbe Anwendungsmethode.

HTML Hintergrund Grundlagen

Sie können mehrere Elemente als Hintergrund verwenden:

  • Farbe
  • Hintergrundbild
  • Texture Bild.

Wir werden uns mit jedem von ihnen genauer befassen.

Um die Hintergrundfarbe für die Site festzulegen, wird die Hintergrundfarbeigenschaft des Stilattributstils verwendet. Das heißt, um die Primärfarbe für eine Webseite festzulegen, müssen Sie sie im Tag registrieren. Zum Beispiel:

HTML unterstützt nur 16 Schlüsselwörter für Farbe. Hier sind einige davon: weiß, rot, blau, schwarz, gelb und andere.

Um den Hintergrund für die HTML-Site festzulegen, ist es daher besser, das Hexadezimalformat oder RGB zu verwenden.

Neben der Farbauswahl stehen auch andere Einstellungen zur Verfügung. Wenn die Eigenschaft background-color auf transparent festgelegt ist, wird der Hintergrund der Seite transparent. Dieser Wert ist standardmäßig dieser Eigenschaft zugewiesen.

Betrachten Sie nun die Möglichkeiten der Hypertextsprache, um das Hintergrundbild für die Site festzulegen. Dies kann mit der Eigenschaft background-image erfolgen.

Angenommen, wir entwickeln eine Website über Poesie und müssen ein Pegasus-Bild als Substrat verwenden. Das geflügelte Pferd verkörpert die Freiheit des kreativen Denkens des Dichters!

  • repeat-x - Wiederholt das Hintergrundbild horizontal.
  • Wiederholung-y - vertikal,
  • Wiederholen - auf beiden Achsen,
  • no-repeat - Wiederholung ist verboten.

Unter den aufgeführten Optionen interessieren uns letztere. Bevor wir den Hintergrund der Site ändern, verwenden wir ihn in unserem Code:

  • Schlüsselwort (oben, unten, Mitte, links, rechts),
  • Prozent - Der Countdown beginnt in der oberen linken Ecke.
  • In Maßeinheiten (Pixel).

Wir verwenden die einfachste Zentrierungsoption:

Es kommt vor, dass Sie beim Scrollen die Position des Bildes korrigieren müssen. Verwenden Sie daher die spezielle Eigenschaft für Hintergrundanhänge, bevor Sie ein Bild zum Hintergrund der Site machen. Die Werte, die er akzeptiert, sind:


  • scrollen
  • behoben.

Wir brauchen den letzten Wert. Nun sieht der Code unseres Beispiels so aus: [/ HTML]

Textural Site Hintergrund

Im ersten Beispiel haben wir für den Hintergrund eine große und schöne Wüstenlandschaft verwendet. Aber für solche Schönheit muss man voll bezahlen. Das Gewicht eines Bildes in hoher Qualität kann mehrere Megabyte erreichen.

Dieser Betrag wirkt sich nicht auf die Seitenladegeschwindigkeit des Browsers mit einer Hochgeschwindigkeits-Internetverbindung aus. Aber was ist mit dem mobilen Internet, bei dem das Herunterladen einiger "Meter" viel Zeit in Anspruch nimmt?

All diese Probleme werden mit einem Texturhintergrund gelöst. Es wird ein kleines Bild als Texturmuster verwendet. Auch wenn es viele Male wiederholt wird, wird die Zeichnung nur einmal geladen.

Um einen dunklen Hintergrund für die Site zu erstellen, rufen Sie Photoshop auf und erstellen Sie ein Bild in Form eines 1200 Pixel langen und 15 Pixel breiten Streifens. Wenden Sie dann einen einfachen Schwarzweiß-Farbverlauf an und verbinden Sie die resultierende Textur mit der Site-Seite:

Der Klarheit halber haben wir Text hinzugefügt und seine Farbe mithilfe der color-Eigenschaft festgelegt. Folgendes ist passiert:

CSS-Tools

Alle oben beschriebenen Eigenschaften gelten auch für Cascading Style Sheets. Erstellen Sie den CSS-Websitehintergrund, indem Sie den Code für eines unserer vorherigen Beispiele neu schreiben:

Das Ergebnis wird ähnlich sein.

Nun, hier haben wir alle Optionen zum Ändern des Hintergrunds auf der Site untersucht. Jetzt müssen Sie nur noch eine Zeichnung des zukünftigen Teppichs erstellen und auf den Seiten Ihrer Ressource verteilen. Aber das liegt schon an dir.

Sehen Sie sich das Video an: HTML & CSS Tutorial für Anfänger 30 -- Hintergrundbild einfügen (Kann 2021).

Pin
Send
Share
Send
Send