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>

Share and Enjoy: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.