Wie Erstelle Ich Einen Gummihintergrund?

Inhaltsverzeichnis:

Wie Erstelle Ich Einen Gummihintergrund?
Wie Erstelle Ich Einen Gummihintergrund?

Video: Wie Erstelle Ich Einen Gummihintergrund?

Video: Wie Erstelle Ich Einen Gummihintergrund?
Video: How to make a seamless pattern in Adobe Illustrator 2024, Kann
Anonim

Wenn Sie Ihre eigene Website erstellen, möchten Sie natürlich, dass diese unabhängig von der Browserversion des Benutzers so attraktiv wie möglich dargestellt wird. Insbesondere damit das Hintergrundbild gestreckt und an die Auflösung des Computermonitors angepasst wird.

Wie erstelle ich einen Gummihintergrund?
Wie erstelle ich einen Gummihintergrund?

Es ist notwendig

Kenntnisse im Umgang mit HTML, CSS, Java-Script

Anleitung

Schritt 1

Öffnen Sie den Code für Ihre Site in einem beliebigen Editor, z. B. Notepad oder einem speziellen Webdesign-Programm, Dreamweaver. Fügen Sie die folgenden Zeilen in den Code ein, um den Hintergrund der Site zu dehnen. Hintergrund hinzufügen: url („Link zum Bild einfügen“).

Schritt 2

Um das Bild horizontal zu vergrößern, verwenden Sie den folgenden Code: Hintergrund: url („Link zum Bild einfügen“repeat-x), vertikal – Ersetzen Sie am Ende des Codes x durch y. Wenn die Site in einer CSS-Datei formatiert ist, fügen Sie den Code ein. Auf diese Weise können Sie Ihrer Website einen gummiartigen Hintergrund hinzufügen.

Schritt 3

Verwenden Sie das folgende Codebeispiel, um ein Hintergrundbild auf einer Seite zu platzieren und es automatisch an die Auflösung des Monitors anzupassen, auf dem die Seite angezeigt wird. Beispielcode: body {background: "Link zum Hintergrundbild einfügen" () no-repeat fixed left center; dann Hintergrundgröße: […].

Schritt 4

Um das Hintergrundbild zu dehnen, fügen Sie einfach ein Bild als Hintergrund ein und stellen Sie dessen Breite auf 100 % ein. Fügen Sie beispielsweise folgenden Text in den Seitencode ein: Hintergrundbild "alt =" Geben Sie den Namen des Bildes ein "/>. Daher wird es verwendet, um die Breite des Bildes anzupassen, aber seine Proportionen werden verletzt.

Schritt 5

Auf ähnliche Weise können Sie das Bild so einstellen, dass es in der Höhe gedehnt wird, indem Sie height anstelle des width-Attributs verwenden. Oder verwenden Sie das folgende Codebeispiel für css: Hintergrundbild der Site) "> und fügen Sie danach 100% Breite des Bildes wie im vorherigen Beispiel hinzu. Sie können auch das Skript verwenden, um die Bildschirmauflösung des Benutzers herauszufinden und die Größe zu bearbeiten Ihres Tisches dafür.

Empfohlen: