Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Wie designe ich ein Layout? PART III (Der Hintergrund)

Heute zeige ich euch, wie ihr den Hintergrund persönlich anpasst ... ihr könnt natürlich im Vorlagendesigner die Farbe wechseln, aber manchmal sind Bilder schöner. So wie bei der lieben Lara von My heart feels what my brain doesn't know.





In diesem Fall gilt es sogar auch für dir neue Vorlage, auf die gleiche Art und Weise, aber ich erkläre es für die alte Variante.

Zuerst entscheidet ihr euch welche Art von Hintergrund ihr haben wollt. Ein Bild, das den ganzen Bildschirm ausfüllt so wie hier bei Lara oder ein Pattern, das sich unendlich oft wiederholt. So wie Butterherz.
Das Bild, für das ihr euch entschieden habt, ladet ihr irgendwo hoch oder bei einem Pattern könnt ihr mal hier gucken.

Jetzt öffnet ihr euren HTML Teil.
Dort sucht ihr nach body {
Danach sollte etwas mit background:§bgcolor; stehen. Dann seid ihr richtig.

Jetzt ersetzt ihr §bgcolor durch url(LINK ZU EUREM BILD)
ACHTUNG: Zwischen url und dem Doppelpunkt kein Leerzeichen lassen.

Hier ein Beispiel, wie der Code jetzt aussehen könnte:

body {
background:url(http://static4.grsites.com/archive/textures/natfl/natfl046.gif)


Wir sind mit dem Code aber noch nicht fertig. Jetzt wird er nämlich angepasst.
Hinter den Code jeweils mit Leerzeichen getrennt werden jetzt Formatierungen gesetzt.


fixed - Der Hintergrund ist fixiert, sodass nur der Postbereich und der Sidebarbereich gescrollt wird.
repeat / no-repeat - Gerade bei Pattern sollte man das Repeat aktivieren, dadurch wird der Hintergrund wiederholt. Ansonsten gibt es ein kleines Bildchen irgendwo.
left / right / center / bottom / top - Gibt an wo sich die Bildchen befinden. Die Befehle widersprechen sich nicht.
background:#FARBE - Wenn ihr nur ein kleines Bildchen irgendwo habt, dann definiert ihr hiermit die Farbe für den restlichen Hintergrund.
& vergesst nicht das Semikolon am Ende =)
So können die Codes jetzt aussehen:


background:url(http://static4.grsites.com/archive/textures/natfl/natfl046.gif) fixed repeat; 


oder background:url(http://static3.grsites.com/archive/textures/dgrey/dgrey007.gif) fixed no-repeat #2f4f4f;




So, das wars dann auch wieder =)




EDIT: Um nur einen Balken oben zu haben fügt ihr repeat-x ein - es wird also an der x-Achse wiederholt. Das gleiche könnt ihr mit einem Balken an der Seite machen. Dann fügt ihr repeat-y ein.

Kommentare:

  1. bei mir funktioniert das mit den Bild einfügen nicht und ich weiß nicht warum ? :/
    Kann mir bitte wer weiter helfen ?

    AntwortenLöschen
  2. Wenn du uns deinen Bloglink geben würdest, dann könnten wir eventuell helfen. Anonym geht's nicht.

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.