Nistplatz: Wie HTML, um das Hintergrundbild zu machen

Viele neue Layout, nur um im Herzen der Erstellung von Websites zu erhalten, fragen sich oft, wie HTML, um das Hintergrundbild zu machen.Und wenn einige von ihnen können mit diesem Problem umzugehen, haben Sie immer noch Probleme bei der Dehnung die gesamte Breite des Bildes auf dem Monitor.Gleichzeitig würde Ich mag, um die Website auf allen Browsern angezeigt sehen, also muss es mit den Anforderungen krossbrauzernosti entsprechen.Sie können einen Hintergrund auf zwei Arten einstellen: durch die Verwendung von HTML-Tags und CSS-Stile.Jeder für sich selbst wählt die beste Option.Natürlich ist CSS-Stil viel bequemer, weil der Code in einer separaten Datei gespeichert und nicht nehmen zusätzliche Lautsprecher in den Haupt-Website-Tags, aber zuerst ein einfaches Verfahren zur Einstellung der Hintergrundbild auf der Website zu betrachten.

grundlegende HTML-Tags, um die Hinter

Also, auf die Frage, wie man ein Hintergrundbild zu machen, um auf dem Bildschirm zu html zu gehen.Um schöne Seite sehen, müssen Sie ein ziemlich wichtiges Detail zu verstehen: es ist genug, nur um einen Hintergrund mit Farbverlauf oder eine Farbe zu malen zu machen ist, aber wenn Sie, um das Bild in den Hintergrund eingefügt werden soll, wird es über die gesamte Breite des Monitors nicht zu dehnen.Das Bild war ursprünglich notwendigen abholen oder kreiere deine eigenen Design mit dieser Erweiterung, in der Sie die Seite anzuzeigen.Nur wenn das Hintergrundbild fertig ist, verschieben Sie sie in einem Ordner namens «Bilder».In ihm werden wir alle verwendeten Bilder, Animationen und andere Bilddateien zu speichern.Dieser Ordner sollte im Root-Verzeichnis der Datei mit allen Ihren HTML sein.Jetzt können Sie gehen Sie zum Code.Es gibt mehrere Optionen für die Aufzeichnung-Code, mit dem das Muster Bild zu ändern.

  1. Write Attribut-Tag.
  2. via CSS-Stil im HTML-Code.
  3. Write CSS-Stil in einer separaten Datei.

Wie HTML, um das Hintergrundbild zu machen, für Sie zu entscheiden, aber ich würde gerne ein paar Worte darüber, wie es wäre das optimal sein zu sagen.Die erste Methode ist, indem er durch ein Tag ist seit langem überholt.Die zweite Möglichkeit ist sehr selten verwendet, weil es sich herausstellt, dass eine Menge des gleichen Codes.Eine dritte Option ist die häufigste und effektiv.Hier ist die HTML-Tag Beispiele:

  1. ersten Verfahren zur Aufzeichnung durch einen Tag (Körper) in der Datei index.htm.(Body background = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ body): Es wird in dieser Form geschrieben.Das heißt, wenn wir ein Bild mit dem Namen «Bild» und Erweiterung JPG zu haben, und der Ordner, die wir mit dem Namen «Bilder», dann wird der Datensatz von den HTML-Code würde wie folgt aussehen: (body background = "Images / Picture.jpg") ... (/ body).
  2. zweites Verfahren umfaßt Aufzeichnungs CSS Styling, sondern wird in der gleichen Datei mit dem Namen index.htm geschrieben.(body style = "background: url ('../ images / Picture.jpg')").
  3. Die dritte Methode wird in der in zwei Dateien.(Kopf) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ Kopf): Das Dokument mit dem Namen index.htm Tag (Kopf) wird eine solche Zeile geschrieben.Ein Stil-Datei namens style.css schon schreiben: body {background: url (Bilder / Picture.jpg ')}.

Wie HTML, um das Hintergrundbild zu machen, haben wir diskutiert.Jetzt müssen Sie herausfinden, wie das Bild über die Breite des gesamten Bildschirms zu dehnen.

Methoden der Dehnung der Tapete an der Breite des Fensters

vorstellen unserer Bildschirm in Prozentform.Es stellt sich heraus, daß die gesamte Länge und Breite des Bildschirms 100% x 100%.Wir brauchen, um das Bild zu dieser Breite zu dehnen.In den Bildern in der Datei style.css Linie, die das Bild auf die gesamte Breite und Länge des Monitors strecken wird gespeichert.Wie es in Ihrem CSS-Stil geschrieben?Es ist ganz einfach!

Körper

{

background: url (Bilder / Picture.jpg ')

background-size: 100%;/ * Dieser Beitrag ist für die meisten modernen Browsern * /

}

So haben wir herausgefunden, wie man die Bildhintergrund, auf dem Bildschirm html.Gibt es ein Verfahren zum Aufzeichnen von in der Datei index.htm.Obwohl diese Methode und veraltet, aber für Anfänger ist es notwendig, zu wissen und zu verstehen.Das Tag (Kopf) (Stil) div {background-size: Abdeckung;} (/ Style) (/ Kopf), dieser Satz bedeutet, dass wir teilen einen Spezialeinheit für den Hintergrund, die über die gesamte Breite des Fensters positioniert wird.Wir haben zwei Möglichkeiten, um die Seite Hintergrundbild html machen betrachtet, wird das Bild um die volle Breite des Bildschirms in einer der modernen Browsern gestreckt.

Wie man einen festen Hintergrund

machen Wenn Sie sich entscheiden, um das Bild als Hintergrund verwenden, die Zukunft der Web-Ressource, dann müssen Sie nur wissen, wie, um es fest zu machen, so dass sie nicht in der Länge dehnen und nicht die ästhetische Erscheinung zu verwöhnen.Einfach mit HTML-Code, um einen kleinen Zusatz zu registrieren.Sie müssen Datei style.css einen Satz nach dem Hintergrund hinzufügen: url (Bilder / Picture.jpg ') befestigt ist;oder statt dessen nach dem Semikolon getrennte Zeile hinzugefügt - position: fixed.So wird Ihr Hintergrundbild festgelegt werden.Beim Scrollen eine Content-Website, werden Sie sehen, dass die Textzeilen werden in Bewegung, aber der Hintergrund bleibt bestehen.So haben Sie gelernt, wie man HTML, um das Hintergrundbild zu machen, in mehrfacher Hinsicht.

arbeiten mit Tabellen in HTML

Viele unerfahrene Web-Entwickler, die mit Tischen und Einheiten konfrontiert verstehen oft nicht, wie HTML, um die Tabelle Hintergrundbild zu machen.Wie alle Teams HTML- und CSS-Designs, ist die Sprache der Web-Programmierung sehr einfach.Und die Lösung für dieses Problem ist es, ein Paar von Codezeilen zu schreiben.Sie sollten bereits wissen, dass das Schreiben eine Tabelle Zeilen und Spalten, die jeweils in der durch die Tags (tr) und (td) gekennzeichnet.Um den Hintergrund der Tabelle in Form von Bildern zu machen, ist es notwendig, mit dem Tag (Tabelle), (tr) oder (td) einen einfachen Satz mit Bezug auf das Bild hinzuzufügen: Hintergrund = URL des Bildes.Aus Gründen der Klarheit geben wir ein paar Beispiele.

Tabellen mit Hintergrundbild statt: HTML Beispiele

Zeichnen Sie eine 2x3-Tabelle und machen es das Hintergrundbild in den Ordner "Bilder" gespeichert: (table background = "Images / Picture.jpg") (tr) (td)1 (/ TD) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ Tabelle).Also unser Tisch wird im Hintergrund des Bildes gezogen werden.

Zeichnen Sie nun die gleiche Plattengrößen 2x3, aber ein Bild einfügen in einer Spalte die Nummer 1, 4, 5 und 6 (Tabelle) (tr) (td background = "Images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 (/ td) (td background =" Images / Picture.jpg ") 6 (/ td) (/ tr) (/ Tabelle).Nachdem ich kann sehen, dass der Hintergrund erscheint nur in jenen Zellen, in denen wir registriert haben, aber nicht die gesamte Tabelle.

Browserübergreifende Website

Es gibt so etwas wie eine Cross-Browser-Kompatibilität Web-Ressource.Dies bedeutet, dass die Seiten der Website gleich gut in verschiedenen Typen und Versionen von Browsern angezeigt werden.Es sollte HTML-Code und CSS, um den Stil von Browsern erforderlich anpassen.Darüber hinaus ist in der modernen Ära der Smartphones, viele Web-Entwickler versuchen, Websites, die angepasst sind und eine mobile Version eines Computers und Look zu kreieren.