So legen Sie ein Hintergrundbild in CSS fest

Das Erstellen einer Website ist eine großartige Möglichkeit, sich auszudrücken. Obwohl es viele Tools zum Erstellen von Websites gibt, ist es eine unterhaltsame Möglichkeit, selbst zu schreiben, um mehr darüber zu erfahren, wie Websites hinter den Kulissen funktionieren. Ein gutes Anfängerprojekt ist es, eine Website zu erstellen und ein Hintergrundbild mit CSS hinzuzufügen. Dieses Projekt wird Sie mit HTML und CSS zum Laufen bringen.

Was ist CSS?

CSS steht für Cascading Stylesheet. Es ist eine Programmiersprache, mit der Sie Markup-Sprachen gestalten können. Eine solche Auszeichnungssprache ist HTML oder Hyper-Text Markup Language. HTML wird verwendet, um Websites zu erstellen. Obwohl Sie einen Teil des Stils der Website mit HTML steuern können, bietet CSS viel mehr Kontroll- und Gestaltungsmöglichkeiten.

Erstellen einer einfachen Website mit HTML

Da CSS nur eine Stilsprache ist, benötigen wir zunächst etwas zum Stilen, um es zu verwenden. Eine sehr einfache Website wird uns ausreichen, um mit CSS zu spielen. Auf unserer Seite wird 'Hallo Welt' angezeigt.

  
  
  
  
 Hello World

Falls Sie mit HTML nicht vertraut sind, lassen Sie uns kurz durchgehen, was alle Elemente tun. Wie bereits erwähnt, ist HTML eine Auszeichnungssprache, was bedeutet, dass es Tags verwendet, um den Text zu markieren. Immer wenn Sie ein Wort sehen, umgeben von es ist ein etikett. Es gibt zwei Arten von Tags, ein Tag, das den Anfang eines Abschnitts markiert, und eines, das das Ende eines Abschnitts mit markiert. Der Text innerhalb eines Abschnitts soll diese Unterscheidung auch leichter erkennen lassen.

In unserem Beispiel haben wir vier Tags. Die html -Tag gibt an, welche Elemente Teil der Website sind. Die Kopf -Tag enthält die Header-Informationen, die nicht auf der Seite angezeigt werden, aber zum Erstellen der Seite benötigt werden. Alle angezeigten Elemente liegen zwischen den Karosserie Stichworte. Wir haben nur ein angezeigtes Element, das P Schild. Es teilt dem Webbrowser mit, dass der Text ein Absatz ist.

Verwandt: 10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

CSS zu HTML hinzufügen

Da wir nun eine einfache Seite haben, können wir den Stil mit CSS anpassen. Unsere Seite ist im Moment ziemlich einfach, und es gibt nicht viel, was wir tun können, aber beginnen wir damit, unseren Absatz hervorzuheben, damit wir ihn durch Hinzufügen eines Rahmens vom Hintergrund unterscheiden können.

  
  
  
  
 Hello World

Jetzt wird unser Absatz von einem schwarzen Rand umgeben. Durch das Hinzufügen einer Stilbeschreibung in CSS zu unserem Absatz-Tag wurde der Website mitgeteilt, wie der Absatz gestaltet wird. Wir können weitere Beschreibungen hinzufügen. Lassen Sie uns den Leerraum oder die Auffüllung um unseren Absatz vergrößern und unseren Text zentrieren.

  
  
  
  
 Hello World

Unsere Website sieht besser aus, aber unser HTML sieht mit all diesen Beschreibungen im Absatz-Tag unordentlich aus. Wir können diese Informationen in unseren Header verschieben. Unser Header enthält Informationen, die wir benötigen, um die Website korrekt anzuzeigen.

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

Jetzt ist unser HTML einfacher zu lesen. Sie werden feststellen, dass wir einige Dinge ändern mussten. Das style-Tag teilt dem Webbrowser Stilinformationen mit, aber auch, was zu stylen ist. In unserem Beispiel haben wir zwei verschiedene Möglichkeiten verwendet, um ihm mitzuteilen, was er stylen soll. Die P im style-Tag weist den Webbrowser an, diesen Stil auf alle Absatz-Tags anzuwenden. Die #ourAbsatz Abschnitt weist es an, nur Elemente mit der ID zu stylen unserAbsatz . Beachte das Ich würde Informationen wurden dem p-Tag in unserem Körper hinzugefügt.

jemand hat mir eine Freundschaftsanfrage geschickt und ist nicht mehr da

Importieren einer CSS-Datei in Ihre Website

Das Hinzufügen der Stilinformationen zum Header macht unseren Code viel einfacher zu lesen. Wenn wir jedoch viele verschiedene Seiten auf die gleiche Weise gestalten möchten, müssen wir diesen Text oben auf jeder Seite hinzufügen. Das mag nicht nach viel Arbeit erscheinen, man kann es ja kopieren und einfügen, aber es macht viel Arbeit, wenn man später ein Element ändern möchte.

Stattdessen werden wir die CSS-Informationen in einer separaten Datei speichern und die Datei importieren, um die Seite zu gestalten. Kopieren Sie die Informationen zwischen den Style-Tags und fügen Sie sie in eine neue CSS-Datei ein unsereCSSfile.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Importieren Sie dann die Datei in die HTML-Datei.

  
  
  
  
  
 Hello World

Ein Hintergrundbild mit CSS hinzufügen

Da Sie nun über eine solide Basis in HTML und CSS verfügen, ist das Hinzufügen eines Hintergrundbilds ein Kinderspiel. Identifizieren Sie zunächst, welchem Element Sie ein Hintergrundbild geben möchten. In unserem Beispiel fügen wir der gesamten Seite einen Hintergrund hinzu. Das bedeutet, dass wir den Stil der . ändern wollen Karosserie . Denken Sie daran, dass die Body-Tags alle sichtbaren Elemente enthalten.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Um den Textkörperstil in CSS zu ändern, verwenden Sie zuerst die Karosserie Stichwort. Fügen Sie dann wie vor {} geschweifte Klammern hinzu. Alle Stilinformationen für den Körper müssen sich zwischen den geschweiften Klammern befinden. Das Stilattribut, das wir ändern möchten, ist Hintergrundbild . Es gibt viele Stilattribute. Erwarte nicht, sie alle auswendig zu lernen. Setzen Sie ein Lesezeichen für einen CSS-Eigenschaften-Spickzettel mit Attributen, die Sie sich merken möchten.

Verwandt: 8 coole HTML-Effekte, die jeder zu seiner Website hinzufügen kann

So sehen Sie das WLAN-Passwort für Android

Verwenden Sie nach dem Attribut einen Doppelpunkt, um anzugeben, wie Sie das Attribut ändern. Um ein Bild zu importieren, verwenden Sie URL() . es zeigt an, dass Sie einen Link verwenden, um auf das Bild zu verweisen. Setzen Sie den Dateispeicherort in die Klammern zwischen Anführungszeichen. Beenden Sie die Zeile abschließend mit einem Semikolon. Obwohl Leerzeichen in CSS keine Bedeutung haben, verwenden Sie Einrückungen, um das CSS leichter lesbar zu machen.

Unser Beispiel sieht so aus:

Wenn Ihr Bild aufgrund der Bildgröße nicht richtig angezeigt wird, können Sie das Bild direkt ändern. Es gibt jedoch Hintergrundstilattribute in CSS, mit denen Sie den Hintergrund ändern können. Bilder, die kleiner als der Hintergrund sind, werden automatisch im Hintergrund wiederholt. Um das auszuschalten, füge hinzu Hintergrund Wiederholung:keine Wiederholung; zu deinem Element.

Es gibt auch zwei Möglichkeiten, ein Bild den gesamten Hintergrund abzudecken. Zunächst können Sie mit die Hintergrundgröße auf die Bildschirmgröße einstellen Hintergrundgröße: 100 % 100 %; , aber dies streckt das Bild und kann das Bild zu stark verzerren. Wenn Sie die Proportionen des Bildes nicht ändern möchten, können Sie die Hintergrundgröße auch auf einstellen Startseite . Cover bewirkt, dass das Hintergrundbild den Hintergrund überdeckt, das Bild jedoch nicht verzerrt.

Ändern der Hintergrundfarbe

Lassen Sie uns noch eine letzte Sache ändern. Da wir nun einen Hintergrund haben, ist unser Absatz schwer zu lesen. Machen wir den Hintergrund weiß. Der Prozess ist ähnlich. Das Element, das wir ändern möchten, ist #ourParagraph. Das # zeigt an, dass 'ourParagraph' ein ID-Name ist. Als nächstes wollen wir die Hintergrundfarbe Weiß zuordnen.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

Viel besser.

Gestalten Sie Ihre Website weiterhin mit CSS

Nachdem Sie nun wissen, wie Sie den Stil verschiedener HTML-Elemente ändern können, sind Ihnen keine Grenzen gesetzt! Die grundlegende Methode zum Ändern von Stilattributen ist dieselbe. Identifizieren Sie das Element, das Sie ändern möchten, und beschreiben Sie, wie Sie das Attribut ändern. Der beste Weg, um mehr zu erfahren, besteht darin, mit verschiedenen Attributen herumzuspielen. Fordern Sie sich selbst heraus, als nächstes die Farbe Ihres Textes zu ändern.

Teilen Teilen Tweet Email Die 8 besten Websites für hochwertige HTML-Codierungsbeispiele

Möchten Sie HTML lernen, um Ihre eigenen Websites und Apps zu codieren? Verwenden Sie diese Webseiten-Beispiele und den Quellcode, um sich HTML und CSS beizubringen.

Weiter lesen Verwandte Themen

Programmierung
HTML
Web-Design
CSS

Über den Autor Jennifer Seaton(21 Artikel veröffentlicht)

J. Seaton ist ein Science Writer, der sich auf die Aufschlüsselung komplexer Themen spezialisiert hat. Sie hat einen Doktortitel von der University of Saskatchewan; Ihre Forschung konzentrierte sich auf die Nutzung von spielbasiertem Lernen, um das Online-Engagement von Schülern zu erhöhen. Wenn sie nicht arbeitet, finden Sie sie beim Lesen, beim Spielen von Videospielen oder bei der Gartenarbeit.

Mehr von Jennifer Seaton

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren