HTML ist eine Auszeichnungssprache zum Erstellen von Webseiten, die mit CSS animiert werden können. Webseiten werden häufig mit verschiedenen Stilen, Bitmaps und Vektorbildern erstellt. Insbesondere Bilder können verwendet werden, um ein Hintergrundbild auf einer Seite zu erstellen.
Das Erstellen eines Hintergrunds mit einem Bild ist eine einfache und effektive Möglichkeit, Ihrer Webseite Stil und Attraktivität hinzuzufügen. Es gibt mehrere Möglichkeiten, einen Hintergrund mit einem Bild in HTML zu erstellen, einschließlich der Verwendung des background-Attributs für ein Tag
und die CSS-Eigenschaft background-image.
Verwenden des background-Attributs für ein Tag
legt ein Hintergrundbild für die gesamte Seite fest. Sie müssen den Pfad zum Bild im background-Attribut angeben, zum Beispiel:
Diese Methode wird normalerweise für einfache Lösungen verwendet, wenn Sie ein Hintergrundbild für die gesamte Seite ohne zusätzliche Stile und Einstellungen festlegen möchten. Auf der anderen Seite bietet die Verwendung der CSS-Eigenschaft background-image eine flexiblere Möglichkeit, den Hintergrund mithilfe von Klassen und IDs zu steuern.
Erstellen eines Hintergrunds mit einem Bild
In HTML können Sie einen Hintergrund mit Bildern erstellen. Verwenden Sie dazu die CSS-Eigenschaft background-image.
Um ein Bild als Hintergrund festzulegen, müssen Sie seine URL im Wert dieser Eigenschaft angeben. Zum Beispiel:
- Erstellen Sie einen Ordner "images" im Stammverzeichnis des Projekts und platzieren Sie das gewünschte Bild dort.
- Öffnen Sie die HTML-Datei, und fügen Sie den folgenden Code hinzu:
In diesem Beispiel wird ein Background-Hintergrundbild festgelegt.jpg. Mit background-repeat: no-repeat wird das Bild nur einmal angezeigt, und mit background-size: cover wird es gedehnt, um den gesamten Bildschirm zu füllen.
Sie können auch andere Werte für die background-size-Eigenschaft verwenden, z. B.:
- background-size: contain - Das Bild wird komprimiert oder gedehnt, um vollständig in den angegebenen Bereich zu passen.
- background-size: auto - Das Bild wird in seiner natürlichen Größe angezeigt.
Jetzt haben Sie eine Grundlage, um einen Hintergrund mit einem Bild zu erstellen. Geben Sie einfach den Pfad zum gewünschten Bild an und passen Sie die Anzeige mithilfe der CSS-Eigenschaften an.
Einfügen eines Bildes über CSS
Um einen Hintergrund mit einem Bild auf einer Webseite zu erstellen, können Sie die CSS-Eigenschaft verwenden background-image. Mit dieser Eigenschaft können Sie den Pfad zu einem Bild festlegen und dessen Position bestimmen.
Um ein Bild als Hintergrund einzufügen, müssen Sie die folgende Syntax verwenden:
Hier bildpfad - dies ist der Pfad zur Bilddatei. Es kann sowohl relativ als auch absolut sein.
Außerdem können Sie die Position des Bildes im Hintergrund mithilfe der Eigenschaft anpassen background-position. Um beispielsweise ein Bild in der oberen linken Ecke zu platzieren, können Sie den folgenden Code verwenden:
background-position: left top;
Wenn Sie möchten, dass das Bild den gesamten Hintergrund der Seite einnimmt, können Sie den folgenden Code verwenden:
Jetzt wissen Sie, wie Sie ein Bild mit CSS als Hintergrund auf Ihrer Webseite einfügen!
Verwenden eines Tags für den Hintergrund
Um ein Hintergrundbild für ein Element mithilfe eines Tags festzulegen, müssen Sie dem HTML-Dokument den folgenden Code hinzufügen:
Hier wird im Attribut `style` die Eigenschaft `background-image' festgelegt, die den Pfad zum Bild für den Hintergrund angibt. Der Bildpfad muss relativ zum Speicherort des HTML-Dokuments angegeben werden.
Wenn sich das Bild beispielsweise im selben Ordner wie das HTML-Dokument befindet, können Sie einfach den Namen der Bilddatei angeben:
Wenn sich das Bild in einem anderen Ordner befindet, müssen Sie einen Pfad relativ zum Speicherort des HTML-Dokuments angeben:
Ein Tag kann verwendet werden, um einen Hintergrund für jedes Element auf einer Webseite festzulegen - dies kann ein Titel, ein Absatz, eine Liste oder ein anderes Element sein. Beispiel für die Verwendung eines Tags zum Festlegen eines Hintergrunds:
Text mit Hintergrundbild
Die Verwendung eines Tags mit dem Attribut `style` macht es daher einfach und einfach, ein Hintergrundbild für Elemente auf einer Webseite in HTML festzulegen.
Positionierung des Hintergrunds
- background-position: top; - das Hintergrundbild wird oben im Element angezeigt.
- background-position: bottom; - das Hintergrundbild wird am unteren Rand des Elements angezeigt.
- background-position: left; - das Hintergrundbild wird auf der linken Seite des Elements angezeigt.
- background-position: right; - das Hintergrundbild wird auf der rechten Seite des Elements angezeigt.
- background-position: center; - das Hintergrundbild wird in der Mitte des Elements angezeigt.
- background-position: x% y%; - das Hintergrundbild wird mit dem angegebenen Prozentversatz relativ zur vertikalen und horizontalen Achse des Elements angezeigt.
- background-position: xpx ypx; - das Hintergrundbild wird mit dem angegebenen Pixelversatz relativ zur vertikalen und horizontalen Achse des Elements angezeigt.
Durch die Auswahl einer bestimmten Hintergrundpositionierung können Sie den gewünschten Effekt erzielen und das Hintergrundbild auf einer Webseite ausrichten.
Horizontale und vertikale Ausrichtung des Hintergrunds
Sie können die Eigenschaft background-image verwenden, um einen Hintergrund mit einem Bild in HTML zu erstellen. Damit der Hintergrund jedoch horizontal und vertikal ausgerichtet ist, müssen zusätzliche Stile angewendet werden.
Um den Hintergrund horizontal zentriert auszurichten, müssen Sie die Eigenschaft background-position mit dem Wert center verwenden. Dadurch können Sie das Hintergrundbild horizontal zentrieren.
Was die vertikale Ausrichtung betrifft, kann sie je nach Kontext auf verschiedene Arten erreicht werden. Zu den Optionen gehören die Verwendung der background-attachment-Eigenschaft mit dem Wert fixed oder die background-position-Eigenschaft mit dem Wert center.
Sie können den folgenden Code verwenden, um die vertikale Ausrichtung des Hintergrunds mithilfe einer HTML-Tabelle so genau wie möglich zu erreichen:
Ihr Inhalt ist hier
In diesem Fall wird die Tabelle zum übergeordneten Element des Inhalts und die vertical-Eigenschaft ist align: middle; wird auf eine Tabellenzelle angewendet, wodurch eine vertikale Ausrichtung in der Mitte erreicht wird.
Auf diese Weise können Sie durch die Verwendung verschiedener Kombinationen von HTML-Eigenschaften und -Elementen die horizontale und vertikale Ausrichtung des Hintergrunds in HTML leicht erreichen.
Einstellen des Hintergrunds auf die gesamte Breite und Höhe des Bildschirms
Eine Möglichkeit, den Hintergrund auf die gesamte Breite und Höhe des Bildschirms einzustellen, besteht darin, die Eigenschaft background-size mit dem Wert cover zu verwenden. Zum Beispiel:
Hier gibt das background-image den Pfad des Bildes an, das als Hintergrund verwendet werden soll. Und background-size: mit cover können Sie die Hintergrundgröße so einstellen, dass sie die gesamte Breite und Höhe des Bildschirms vollständig abdeckt. Dadurch kann das Bild den gesamten verfügbaren Bereich füllen und sein Seitenverhältnis beibehalten.
Auf diese Weise wird das Hintergrundbild dank der angegebenen Eigenschaften automatisch skaliert, um seine Größe an die Bildschirmgröße anzupassen, wodurch ein spektakulärer Hintergrund in voller Breite und Höhe erzeugt wird.
Strecken und Skalieren des Hintergrunds
Um das Hintergrundbild über den gesamten Hintergrund zu strecken, können Sie die Eigenschaft background-size mit dem Wert "cover" verwenden. Zum Beispiel:
- background-size: cover;
Mit diesem Wert wird das Bild proportional skaliert, während es den gesamten verfügbaren Hintergrundbereich einnimmt. Wenn das Bild nicht quadratisch ist, können Sie überschüssige Teile des Bildes beschneiden, um das Seitenverhältnis beizubehalten.
Sie können auch die background-size-Eigenschaft mit dem Wert "contain" verwenden, um das Hintergrundbild so zu skalieren, dass es vollständig in den Hintergrundbereich passt. Zum Beispiel:
- background-size: contain;
In diesem Fall ändert das Bild seine Größe so, dass es ohne Beschneidung vollständig sichtbar ist. Wenn das Bild nicht quadratisch ist, kann es zu einem Platz mit freiem Hintergrund kommen.
Je nach dem gewünschten Effekt können Sie eine geeignete Option auswählen, um das Hintergrundbild in HTML zu dehnen oder zu skalieren. Dies wird dazu beitragen, ein attraktives und ästhetisches Erscheinungsbild der Seite zu schaffen.
Feste Hintergrundgröße
Um eine feste Hintergrundgröße zu erstellen, müssen Sie den CSS-Code verwenden. Betrachten wir ein Beispiel:
In diesem Beispiel legen wir das Hintergrundbild mit der Eigenschaft fest background-image. Um zu verhindern, dass sich das Bild wiederholt, verwenden wir die Eigenschaft background-repeat mit Wert no-repeat. Und schließlich mit der Eigenschaft background-size wir legen eine feste Hintergrundgröße fest - 800 Pixel in der Breite und 600 Pixel in der Höhe.
Das Hintergrundbild wird nun mit einer festen Größe angezeigt, sodass Sie den gewünschten ästhetischen Effekt auf der Webseite erzielen können.
