30. Juni 2011

Tutorial: Hintergrundleiste

So, jetzt wird es aber einmal an der Zeit das von euch schon etwas länger gewünschte Tutorial über diese "Leiste" ganz oben in meinem Hintergrund zu machen.


Schritt 1
Diese "Leiste" ist eigentlich leichter herzustellen als wahrscheinlich gedacht: Denn es ist einfach nur ein Hintergrund, der fixiert ist!
Um nun als erstes das gewünschte Bild zu erstellen, welches dann als Leiste angezeigt werden soll, müsst ihr als erstes in einem Bearbeitungsprogramm eurer Wahl eine neue Datei öffnen.
Ich benutze Gimp und als Dateigröße die Anzahl 380x150 Pixel.

Schritt 2
Das erste was ihr nun einfügt ist eure Hintergrundfarbe die sich dann über den ganzen Bloghintergrund strecken soll - also nicht der Hintergrund der Leiste!
Ich empfehle natürlich eher helle Farben! Meine Empfehlungen wären zum Beispiel diese:









Schritt 3
Nun beginnt ihr mit dem gestalten eures Balkens.
Ich möchte ihn nicht ganz so groß - in etwa die Größe wie die Navbar. Die erste Größe die ich also immer als erstes mache ist der größte Balken - das in meinem Fall mit Rosen gefüllte. Ihr könnt natürlich auch wenn ihr es lieber schlichter mögt irgendeine Farbe nehmen! Die Rosen sind bei mir einfach nur Pattern. Was natürlich wichtig ist - wenn euer Muster keines ist, was sich wiederholen kann, sieht das Ganze natürlich total abgehackt aus!
Bisher sieht es jetzt so aus:










Schritt 4
Damit es nicht ganz so trist wirkt, füge ich als nächstes noch einen absetzenden Balken dazwischen - als kleinen Kontrast und "Eye-Catcher".















Da ich es aber lieber noch etwas "Mädchenhafter" und gewagter, sagen wir auch kitschiger haben möchte füge ich noch ein paar Punkte hinzu, die das ganze abrunden sollen!
Diese tupfe ich einfach in gleichmäßigen Abstäden mit einem weißen, runden Pinsel auf.
Wichtig!: Damit ihr die Punkte zu Halbkreisen machen könnt, sollten die anderen Anwendungen vorher immer einzeln auf einer Ebene aufgetragen sein, damit ihr das was von den Punkten nicht sichtbar sein soll dann verstecken könnt!
                                                                                                                                                                   


Schritt 5
Nun geht es um den Teil, bei dem der Hintergrund eingefügt werden muss! 
Hierbei ist nur dieser Teil wichtig:
Um dort hinzukommen drückt ihr einfach F3 und gebt " body { " ein.
Bei background fügt ihr den gleichen Farbcode ein, wie ihr ihn bei der "Leistendatei" eingefügt habt!
Dahinter kommt bei background: #euerFarbcode;

url (der Link deines Bildes); 

Um solch einen Link zu bekommen, könnt ihr die Datei zum Beispiel bei tinypic.com hochladen!
Als nächstest fügt ihr

background-attachment: fixed;

ein, damit der Hintergrund an oberster Stelle auch so stehen bleibt, wie es ist.
Damit sich aber auch noch der Balken an oberster Stelle wiederholt müsst ihr noch

background-repeat: repeat-x;

einfügen!

Das war auch schon die ganze Schwierigkeit!
Ich hoffe, dieses Tutorial hat alle Fragen beseitigt und hilft euch weiter!

Wie findet ihr eigentlich diese Hintergrundbalken und was für Farben/Muster bevorzugt ihr im Hintergrund?

Kommentare :

  1. http://wonderbluee.blogspot.com/2011/06/botm-blog-of-month.html?showComment=1309449138871#c5074832208141404823
    - ich versuche mein glück, vielleicht nimmst du mich ja in den august mit hinein :)

    liebste grüße, my-magical-w0rld.blogspot.com

    AntwortenLöschen
  2. Sieht schön aus!
    Schau dochmal bei mir vorbei, ich verstanstalte zurzeit ein Gewinnspiel
    http://tukatespace.blogspot.com/2011/06/mein-gewinnspiel.html

    Liebe Grüße xx melina

    AntwortenLöschen
  3. okay dankeschön ich freu mich :))
    sagst du mir bescheid wenn das voting losgeht? :)
    hab bei deinem gewinnspiel schon teilgenommen, hoffe ich bin erfolgreich ;)

    liebste grüße, http://my-magical-w0rld.blogspot.com/

    AntwortenLöschen
  4. Also ich liebe ja, wie schonmal gesagt, diese Leiste, aber ich bin warscheinlich viiiiel zu doof, um das hinzubekommen. :D
    Ich werd's morgen mal versuchen.


    http://lafacondontjesuis.blogspot.com/

    AntwortenLöschen
  5. hehe cool :D ohne mist, vorhin als ich auf deinem blog war hab ich so dein design betrachtet und gedacht: "hm wow das is ja mal wieder voll cool, wie Jule das hinbekommen hat... so mit dem header, der leiste und dem zusammenspiel von allem..." :D (naja gut sowas hab ich hier bei dir zugegebenermaßen schon öfters gedacht^^)

    ist echt lieb von dir, dass du uns dran teilhaben lässt und es so gut erklärst :)
    ;*

    AntwortenLöschen
  6. Mit HTML kann man echt viel machen.
    LG Sabine

    AntwortenLöschen
  7. Total schön gemacht. Ich mag es, dass du dir alles an dem Balken selbst ausgedacht hast!
    Aber wenn man so einen Balken hat, muss man auf die Navbar verzichten, oder geht das auch mit Navbar?

    Liebe Grüße

    Taika

    AntwortenLöschen
  8. Ah cool, das ist ja geschickt. Danke für deine schnelle Antwort! Beides, Navbar und Dekoleiste übereinander, fände ich glaube ich auch too much.

    AntwortenLöschen
  9. Name: Maribel
    Bloglink: http://honeysuckerr.blogspot.com/
    Und ich würde gerne bei BotM für August mitmachen.
    Ich habe auf einer Seite auf meinem Blog "Voting" schon darauf aufmerksam gemacht.
    xx

    AntwortenLöschen
  10. Du kannst auch teilnehmen indem du Fan meiner Facebook Seite wirst und dann den Kommentar unter das Gewinnspiel machst.
    LG

    AntwortenLöschen
  11. ok danke'schön. ich mein 6 % ist nicht grade viel aber immer hin.
    & danke, dass du mich mit reingenommen hast ♥

    AntwortenLöschen
  12. Vielen Dank für deine Mühen! Mir gefällt dieses kleine Gimmick sehr und ich werde es, sobald ich wieder zuhause bin selbst mal ausprobieren. Du scheinst dich ja auch so sehr gut mit html usw. Auszukennen, meinst du, du kannst mir da noch ein paar weitere Tipps auf Anfrage geben? ;)

    AntwortenLöschen
  13. dieses balken finde ich wirklich sehr schön, die farben bei dir finde ich auch toll,

    ich würde dennoch blau bevorzugen :)

    AntwortenLöschen
  14. Super Tutorial! und sehr süße Idee+Umsetzng ;D
    mag deinen blog :3

    AntwortenLöschen
  15. es sieht super aus. echt toll! und dein blog gefällt!

    glg http://thetivafever.blogspot.com/

    und schau doch mal bei mir vorbei! =)

    AntwortenLöschen
  16. Bei mir geht das mit dem HTML-einfügen nicht :x
    finde zumindestens das mit dem hintergrund einfügen nicht. Das gibt es bei mir komischer weise nicht?

    AntwortenLöschen
  17. @ Nisi: Könntest du mir einmal deinen Bloglink schicken? Dann schau ich mal drüber, wo man das bei dir finden kann ;-)

    AntwortenLöschen
  18. das ist super! danke fürs zeigen :)

    AntwortenLöschen
  19. Ich habe zwei Fragen,
    wie hast du die Nav-Bar bei deinem Blog wegbekommen?
    Und irgendwie funktioniert das bei mir nicht, also ich komme nicht an HTML Code...ich habe F3 gedrückt und body { eingegeben
    vielleicht weißt du ja einen Rat
    übrigens finde ich es echt toll, dass du so ein Tutorial machst (:

    AntwortenLöschen
  20. Wirklich ein schönes Tutorial :)
    Nur schade, dass es bei mir irgendwie nicht so klappen will. Ich habe probiert, es am Blogende zu machen, aber ich schaff es einfach nicht :D Oben geht's auch nicht. Egal, ich überlege mir was anderes :) Aber es sieht wirklich sehr schön aus :)

    AntwortenLöschen
  21. Es fehlen nur noch 2 Leser, dann mache ich eine Blogvorstellung.
    Also schaut vorbei, würde mich freuen!
    xx, Coco.

    http://summerlights-skye.blogspot.de/

    AntwortenLöschen

Ich freue mich sehr über jeden neuen Kommentar!

my post-favourites