So legen Sie das Hintergrundbild einer Webseite in HTML fest

Heute erkläre ich Ihnen, wie Sie das Hintergrundbild einer Webseite in HTML festlegen. Wir verwenden das Layout-Denken der gesamten Webseite, um zu sehen, welche Methoden festgelegt werden können und welche Unterschiede zwischen den einzelnen Methoden bestehen. Und Tipps zum Festlegen von Hintergrundbildern

Einfarbiger Hintergrund von Webseiten

Wenn Sie einen rein farbigen Webseitenhintergrund haben, müssen Sie nur die HintergrundfarbeHintergrundfarbe festlegen der Körper

body{background:#FFF}

Setzen Sie den Hintergrund der Webseite auf Weiß

body{background:#FFF url(bg.gif) wiederholen- x 0}

Stellen Sie es so ein: Dieses Bild ist ein horizontal gekacheltes Hintergrundbild am oberen Rand der Webseite. Achten Sie hier darauf, den importierten Bildpfad festzulegen entsprechend Ihrem Bildpfad.

2. Horizontales Kachel-Hintergrundbild

Zum Beispiel hat die 2014-Version der Webseite das gleiche Prinzip wie eine Verlaufskachel. Sie schneidet auch einen vertikalen Streifen aus und verwendet ihn als Hintergrund für den Körper Kacheln Sie es horizontal, sodass es den gesamten Bildschirm anzeigt. Der Hintergrund der Webseite ist voll.

Der Code ist derselbe wie der erste, nur die Bilder sind unterschiedlich. Legen Sie fest, dass das Hintergrundbild horizontal auf dem Körper gekachelt wird.

Unregelmäßig großer Bildhintergrund

Ich sehe oft einige Themen- oder Bildwebseiten mit einem sehr großen Bild als Hintergrund, und normalerweise können sowohl Breitbild- als auch Schmalbildmonitore das Vollbild als Vollbildhintergrund anzeigen Das Bild kann ebenso wie das Bild an die Breite und Größe angepasst werden. Tatsächlich ist diese Implementierung sehr einfach. Stellen Sie die Breite und das Grafikdesign dieses Bildes groß genug ein. Die Breite des Bildschirms mit der größten Breite auf dem Markt beträgt beispielsweise 2560 Pixel Diese Webseite kann dann den gesamten Bildschirm ausfüllen. Das Hintergrundbild muss mindestens 2560 Pixel breit sein. Auf diese Weise kann die Webseite den gesamten Bildschirm ausfüllen, wenn sie auf Breitbild- oder schmalen Bildschirmen geöffnet wird. Das Hintergrundbild kann beim Minimieren, Maximieren oder Ändern des Browserfensters im Vollbildmodus geöffnet werden. Das zentrierte Bild sieht aus, als würde sich die Größe des Hintergrundbilds anpassen.

Der Schlüssel: Der Schlüssel zu einem adaptiven Vollbild-Hintergrundbild besteht darin, das Bild breit genug zu machen, damit es den Bildschirm bei der höchsten Auflösung ausfüllen kann, und selbst kleinere Auflösungen füllen ihn natürlich aus. Gleichzeitig müssen Sie das Hintergrundbild wie folgt als Körperhintergrund festlegen und zentrieren.

Wenn dieses Hintergrundbild ist: bg.jpg

Legen Sie den CSS-Code fest:

body{background: url(bg.jpg) no-repeat center 0}

Code-Erklärung: Legen Sie dieses Bild normalerweise als Hintergrund der Webseite fest nicht gekachelt (keine Wiederholung), horizontal zentriert, oben angezeigt

Die Höhe des Kopf-Hintergrundbilds und des unteren Hintergrundbildinhalts kann vergrößert oder verkleinert werden. Der Kopf- und Boden-Hintergrund bleibt unverändert

Hier sind zwei gängige Kopfzeilen oben und unten, um die Layout-Methode festzulegen.

Diese Methode setzt das Kopfhintergrundbild direkt auf den Körperhintergrund, der in der Mitte und oben angezeigt werden soll, und der untere Copyright-Bereich DIV legt gleichzeitig die Breite auf 100 % fest Hintergrundfarbe.

body{background: url(bg.jpg) no-repeat center 0} 
#footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}

Auf diese Weise kann der Hintergrund von Kopf und Unterseite unterschiedlich sein, ohne dass dies von der Höhe des Inhalts beeinflusst wird.

Das untere Hintergrundbild überschreitet die Höhe des urheberrechtlich geschützten unteren Felds bei weitem.

Eine solche Struktur weist oben und unten unterschiedliche Bilder auf, so dass sie sich nicht auf das Hintergrundlayout auswirkt, wenn der mittlere Inhalt zunimmt. Dies kann normalerweise durch Setzen des Hintergrunds des html-Tags< erreicht werden 🎜> und der Körper.

Wenn das obere dunkelblaue Hintergrundbild „top.jpg“ und das untere hellblaue Hintergrundbild „foot.jpg“ ist

DIV CSS legt den wichtigsten CSS-Code für den Webseitenhintergrund fest:

html{background: url(top.jpg) no-repeat center 0} 
body{background: url(foot.jpg) no-repeat center bottom}

Erläuterung: Stellen Sie das dunkelblaue Hintergrundbild als horizontal zentrierten und oberen HTML-Hintergrund ein.

Das Obige ist eine Zusammenfassung mehrerer allgemeiner Hintergrundlayouteinstellungen für Webseiten. Mit den flexiblen Einstellungen können Sie den Hintergrund für Text, HTML und Div festlegen, um den gewünschten Hintergrundeffekt zu erzielen Diese Webseite, dann die Höhe dieses DIV Es kann nicht eingestellt werden (Standard ist automatisch), und die Div-Breite kann auf 100 % eingestellt werden.

Das ist alles zum Festlegen des Webseiten-Hintergrundbilds. Für weitere spannende Inhalte beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So legen Sie die Schriftfarbe in HTML fest

So geben Sie Leerzeichen in HTML ein

Warum müssen Sie CSS-Stile für DIV festlegen?

Das obige ist der detaillierte Inhalt vonSo legen Sie das Hintergrundbild einer Webseite in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!