0 4018

CSS Tutorial – Hintergrund für Internet Seite erstellen

Hier können Sie das Video in voller Größe ansehen

Um einen Hintergrund für eine Webseite zu erstellen kann man verschiedene kostenlose Internet-Dienste nutzen:

Diese Seiten kann ich empfehlen:
bgpatterns.com
www.tartanmaker.com
www.stripegenerator.com
gradient-maker.com

Letzteres ist eine Seite mit der man Farbverläufe generieren kann. Dazu später mehr.

Ein Bild, daß man mit den ersten drei Seiten generiert und heruntergealden hat kann man mit folgendem Code in den Hintergrund der eigenen Seite einbinden:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: url('derdateiname.jpg');
   }
  </style>
 </head>
 <body>
 </body>
</html>

Verwendet man den letzten Link zur Erstellung eines Farbverlaufes muss man noch ein repeat-x in das CSS mit einfügen:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: url('derdateiname.jpg') repeat-x;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Damit man einen sauberen Übergang zu der eigentlichen Hintergrundfarbe bekommt sollte man noch den unteren Farbwert des Farbverlaufes in den Background mit einfügen:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-x;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Hier habe ich die Farbe weiss gewählt.

Wenn man repat-y eingibt, wird das Hintergrund-Bild vertikal wiederholt.

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-y;
   }
  </style>
 </head>
 <body>
 </body>
</html>

repeat-x und repeat-y kann man nicht miteinander kombinieren. Vesuchen Sie es aus. Sie werden keinen Hintergrund zu sehen bekommen.

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-x repeat-y;
   }
  </style>
 </head>
 <body>
 </body>
</html>

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter