Minima Tutorials, Tipps & Tutorials, tutorial

{Minima Basics #2} Bloghintergrund ändern

Es wurde gefragt, wie man einen eigenen Hintergrund einfügen kann. Bei den neuen Vorlagen kann man zwar ein Bild hochladen, aber die Größe ist der Datei ist begrenzt und außerdem kann man nicht bestimmen, wie der Hintergrund sich verhält.
Bei der Minima-Vorlage, mit der ich am liebsten arbeite, kann man kein Bild hochladen – hierfür auch das Tutorial.

1. Ladet ein Bild hoch, das ihr als Hintergrund nutzen wollt. Entweder ist es ein Bild, dass so groß ist wie das Bildschirm selbst oder ein Pattern, das sich unendlich wiederholt. Hier der Unterschied:

Bildhttp://cplovetest.blogspot.de/p/ein-bild-hintergrund.html

Pattern: http://cplovetest.blogspot.de/p/pattern-hintergrund.html

Nur Farbe: http://cplovetest.blogspot.de/

2. HTML bearbeiten. Öffnet dafür das HTML und öffnet die <b:skin>…</b:skin> Zeile:

Sucht im blauen Bereich nach Body{…} und bearbeitet background:…;
  • Zunächst fügt ihr das Bild ein: url(http://bild.jpg/)
  • Dann bestimmt ihr, ob sie wiederholt wird: repeat – oder nicht: no-repeat (dies muss aber nicht zwangsläufig geschrieben werden)
  • Unbewegter Hintergrund wie bei unserem 2. Beispiel: fixed
  • Position des Hintergrund bestimmt ihr mit: center, top, bottom, left und/oder right – beachtet, dass sich die Befehle nicht widersprechen
  • Bestimmt noch die Farbe für den Hintergrund, falls diese nicht oder nur langsam ladet. Falls ihr kein Bild haben wollt, dann lasst alles bis auf die Farbangabe weg: #cccccc (weitere Farben:
    http://www.colorpicker.com/ )
So kann der Code dann aussehen:

background:url(http://triggerhippie.site50.net/designelemente/backhome/background2.png) fixed left bottom no-repeat #FFF6F6;

47 Comments

  1. Juli

    22. March 2012 at 6:57

    Ich damals zu wordpress gewechselt, weil mir blogspot zu unflexibel war. Und jetzt kenne ich mich mit Blogspot besser aus als bei wordpress 😉 verdammt…

  2. Miriam

    23. March 2012 at 15:16

    Oh perfekt, genau das habe ich gerade gebraucht! :))

  3. Teddybär

    24. March 2012 at 11:40

    Ja, irgendwie bekomm ichs nicht hin 🙁 Wie macht man das jetzt mit dem Bild, wenn mans nicht vom Internet sondern von seinem PC aus als Hintergrund verwenden will?

    1. ButterfliesEatReadLove

      16. March 2014 at 16:15

      Du lädst es bei abload.de hoch und fügst dann den direktlink ein 🙂

  4. Goldmädchen

    24. March 2012 at 15:26

    Danke für das super Tutorial! Hab es gleich auch mal ausprobiert udn alles hat super geklappt, ich hab die Variante mit dem einzelnen Bild ausprobiert, allerdings verdeckt die Sidebar das Bild darum hab ich eine Frage und zwar:
    Wie kann man die Sidebar etwas weiter nach unten hin verschieben?
    Ich hoffe man kann mir helfen 🙂
    Lg

  5. Diana

    24. March 2012 at 20:34

    Mal wieder ein super Tutorial 🙂 Würde mich freuen, wenn ihr in eure Email schaut.

    Liebste Grüße

  6. myself - einfach ICH

    31. March 2012 at 5:40

    Vielen Dank!
    Nach etwas tüfteln hat es geklappt :-))

  7. Merle Perle

    8. April 2012 at 13:23

    hat super geklappt, danke!! 🙂
    wie mache ich es, das der postbereich trotzdem weiß bleibt .. ?
    würde mich über antworten freuen !! :):)

  8. Jessi

    9. April 2012 at 21:28

    Welches Design/Layout ist das?

  9. Federn im Wind

    7. May 2012 at 0:06

    Ich hab den Hintergrund beim Vorlagendesigner eingefügt, aber ich kann ich nicht so fixieren das der ganze Hintergrund meines Blogs mit dem Bild gekachelt ist, es funktioniert nur ober waagrecht entlang des Blogs. WIe schaffe ich es das der ganze Blog (mit ausnahme des Postbereiches) mit dem Bild geschmückt ist??! Bitte helft mit! (:
    Liebste Grüsse J.

  10. Anonym

    4. June 2012 at 19:31

    Wie habt ihr denn den freiraum zwischen header und post hinbekommen? Bzw. das jedes Gadjets einzeln ist?
    Falls ihr wisst was ich meine 😀

  11. Belora

    4. June 2012 at 21:24

    danke! Allerdings habe ich jetzt das Problem, dass das Hintergrundbild zu groß ist =(
    Wenn ich es auf eine bestimmte Größe reduziere (an meinen Bildschirm anpasse), dann kann es ja sein, dass es bei anderen Leuten zu groß/ zu klein ist. Kann ich das irgendwie so fixieren, dass es sich immer an die Bildschirmgröße anpasst?
    Vielen Dank und liebe Grüße,
    Belora

  12. Mara

    12. July 2012 at 10:09

    Also ich habe es auch mal versucht , alerding mit einem bild von meinem pc und nicht von einer internetseite, damit habe ich mir die kommplette html versaut und muss jetzt noch mal ganz von vorne anfangen, da ich nicht dran gedacht habe die vorherige vorlage zu speichern, da ich dachte es würde nichts schief gehen :xx

    PS. als kleiner tipp, vielleicht noch mal erklären wie es mit bereits vorhandenen bildern funktioniert :*

  13. Lady_Melon

    15. August 2012 at 11:36

    Hilfe 🙂 Ich hab mir einen eigenen Header gebastelt und würde den gerne in ein Hintergrundbild vom Internet einbauen. Jetzt ist das ganze leider total durcheinander, weil man immer noch das Template von vorher oben sieht. Wie krieg ich das weg?
    Also das Bunte soll weg und das schwarz weiss soll bleiben..
    Kann mir wer helfen?
    http://www.ladymelon.blogspot.co.at

  14. Anonym

    13. October 2012 at 16:55

    Bei mir funktioniert es i-wie nicht… ich hab jetzt das Bild eingefügt, aber es bleibt nur weiß.
    Wieso?

  15. Elly

    2. November 2012 at 17:12

    ich freue mich schon auf das sidbar- und posthintergund Tutorial:) ich weiss nämlich nicht wie das geht!

  16. Anonym

    7. December 2012 at 13:04

    Es wäre gut zu wissen, wie man z.B an den Rand des Postinginhalts und der Sidebar z.B einen Schleifenrand oder Ähnliches hinzufügen kann, ohne dass sich das auf einem anderen PC oder auf einem Tablet "verzieht".
    Wollte nämlich gerne an den Rand Schleifen oder ein Band bringen und als ich das eingefügt habe und auf dem Tablet meinen Blog angeklickt habe, war der Hintergrund verschoben. :/
    Wäre schön, wenn ihr darüber auch ein Tutorial machen könntet.

    Lily

  17. Anonym

    28. February 2013 at 18:31

    Danke du hoe, wegen dir wurde mein Blog gelöscht! F*** You

    1. Mira Ho

      28. February 2013 at 18:51

      Wie soll denn das den gehen? 😀

  18. Miri in Australien

    30. March 2013 at 18:42

    Wie heißt denn dieser schöne Hintergrund, der in dem Beispiel zu sehen ist ? <3

  19. Samira Rina

    26. April 2013 at 10:03

    Bei uns sieht dieses Feld ganz anders aus 🙁 kannst du uns helfen?
    blog.einundzwanzignullsieben@gmx.ch wäre ansonsten unsere Mail Adresse.

    Grüsse

  20. LeoLilie

    3. June 2013 at 19:54

    Hallo, hier mal wieder die Nervbacke, gerade habe ich erfolgreich das mit der Imagemap hingekriegt und hier schon wieder die nächste Frage. Ich hoffe das es hier her passt. Weiß auch nicht genau wonach ich da bei google suchen könnte. Ich habe jetzt ein Hintergrundbild eingefügt und die Sidebar transparent gemacht, dass sie auf dem Hintergrundbild auf einem Streifen liegt. Jetzt habe ich festgestellt, dass auf jedem Computer das anders aussieht und teilweise die Sidebar so halb auf dem Streifen liegt, dass man nichts mehr erkennt. Kann ich das Layout, also die Sidebar und den Blogbereich irgendwie auf dem Hintergrundbild fixieren? So dass es immer richtige dargestellt wird?
    Hier mal der Link zu meinem Blog, falls nicht ganz so verständlich ist, was ich meine:

    http://leolilie.blogspot.de

    Vielen Dank schon im Vorraus und Sorry für die vielen doofen Fragen :-C

  21. Anonym

    4. July 2013 at 17:43

    I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
    http://www.arabie3lan.com الشيخ الروحاني
    I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.

  22. Yuna van Vengeance.

    13. July 2013 at 16:00

    Das funktioniert bei mir überhaupt nicht. 🙁 Bitte um Hilfe. 🙁 Könnte mir diesbezüglich jemand bitte einen Kommentar hinterlassen? Wäre nett..
    Yuna.xo

    1. lovemira

      3. August 2013 at 19:28

      Hast du den Code richtig geschrieben? Da zählt jeder Leerzeichen!

    2. Yuna van Vengeance.

      7. October 2013 at 19:47

      Ja… Und es geht immer noch nicht…

  23. Carolienschen

    5. November 2013 at 18:38

    Gibts mittlerweile ein Tutorial wie ich die Hintergrundfarbe der Sidebar ändere? Ich bekomm dieses blöde grau nicht weg :(:(:(

    Danke schonmal
    http://www.fraukleid.blogspot.de

  24. Anonym

    9. November 2013 at 15:33

    bei mir funktionier es in beiden Vorlagen nicht, in der alten (Minima) und in der neuen (Einfache Vorlgae). Ich gehe genau so vor, wie es hier beschrieben wird und der Hintergrund bleibt trotzdem weiß.

  25. Ines Caranaubahx

    30. November 2013 at 23:49

    Ich finde ja jetzt nicht das das Tutorials 4 Herzchen schwer ist… eher 1 😉

    1. lovemira

      1. December 2013 at 0:34

      Seh ich eigentlich genau so, aber 70% aller Kommentare hier beweisen das Gegenteil :'D

  26. mara

    1. February 2014 at 12:16

    Ich finde es auch nur 'Ein-Herzchen-Schwer', allerdings muss man noch solche 'Strich-Punkte' zwischen den einzelnen Befehlen einfügen, sonst klappt das nicht… Also, bei mir ging es erst, als ich den Code so abänderte:
    background:url(http://3.bp.blogspot.com/-EM81enB1aPw/Uuzin02a0KI/AAAAAAAAAnI/-tAsY0KCdeo/s1600/light_grey.png); fixed; repeat
    Aber sonst tolles Tut! 🙂

  27. Isa

    14. February 2014 at 12:40

    super, toll das du das uns das gezeigt hast 🙂

  28. Anonym

    14. February 2014 at 14:53

    Wie macht man den Header und das Sidebar auf die selbe höhe? 🙂

  29. Annemay von wunderbare Lebensart

    14. February 2014 at 21:33

    Super gute Erklärung hat alles total gut funktioniert wie auch mit deinen anderen Tutorials 🙂

  30. katiy

    18. February 2014 at 21:51

    mal wieder super hilfreich, dankeschön!!:)

  31. Miri

    20. February 2014 at 20:35

    Also bei mir werden helle hintergründe immer so hässlich grau ._. was kann ich dagegen machen? 😮

    Lieben Gruß

  32. Mi Ssy

    30. March 2014 at 13:20

    Wenn ich nach "body {…} suche kommt bei mir garnichts 🙁 ….

  33. Lea

    30. March 2014 at 14:01

    Danke, danke, danke! Das hat mir wirklich weiter geholfen. 🙂

  34. Zuckerwattemonster

    4. April 2014 at 17:23

    Vielen Dank 🙂
    Endlich bin ich meinen langweiligen angegrauten Hintergrund los 🙂

  35. Sara Waldgarten

    15. September 2014 at 13:33

    Ich würde gern den grauen Teil meines Hintergrundes ändern, finde da aber nichts Entsprechendes im Quelltext, also html-Code des Blogs. Vielleicht kannst Du mir dabei weiterhelfen.

    Liebe Grüße
    Sara

  36. Live.laugh.love.

    3. April 2015 at 20:36

    Hallo,ich brauche dringend Hilfe.
    Erstmal verwende ich die einfache Vorlage in weiß mit den standard Einstellungen.
    Wenn ich jetzt Strg + F eingebe und dann "body {" kommt nichts.
    Was soll ich denn jetzt nur tun :(?

    Bitte schreibt mir dringend eine Mail an: Emmchen0123@yahoo.de

    1. Sarah

      11. September 2015 at 19:36

      Schau mal gleich nach den "Variable Definitions". Da müsste gleich im Anschluss "body {" kommen 🙂

  37. Sarah

    11. September 2015 at 19:33

    Hallo!
    Dein Post ist zwar schon ein paar Jahre alt, aber vielleicht kannst du mir trotzdem weiterhelfen: Ich habe jetzt deine neuere Minima-Vorlage installiert und möchte meine Posts einzeln weiß hinterlegen (sodass zwischen den Posts immer noch ein Streifen Haupthintergrund zu sehen ist). Den Post-Hintergrund habe ich als weiß eingestellt, allerdings ist jetzt der gesamte Content-Bereich weiß.
    Kannst du mir sagen, wie ich die Trennung des Hintergrunds zwischen den Posts hinbekomme?

    Liebe Grüße
    Sarah

    1. lovemira

      11. September 2015 at 19:38

      Hallo Sarah,

      kommt darauf an, wenn du alles mitsamt Datum weiß unterlegt haben möchtest, gehst du ans Ende von deinem CSS und fügst .date-outer { … } ein, '…' kannst du dann dein background:#fff; einfügen. Ohne Datum machst du statt .date-outer einfach .post-outer{…}.

      LG

    2. Sarah

      11. September 2015 at 21:02

      Danke für die schnelle Antwort!
      Im Grunde funktioniert es auch, nur bleibt ein allgemeiner weißer Content-Hintergrund zurück. (ich hab den Hintergrund, der später noch da sein soll, mal in dem Screenshot schwarz gefärbt).
      Hab auch schon mit der Suchfunktion gesucht, woher das weiß kommen könnte, allerdings hab ich nur den Header und die Navbar weiß gefärbt. Sonst nichts.
      Irgendeine Idee, warum dieser Bereich weiß ist?
      http://i62.tinypic.com/352j70m.jpg

      LG Sarah

    3. Sarah

      12. September 2015 at 11:50

      Hab den Fehler selbst gefunden!
      Ich hatte eine Zeile mit ".sidebar .widget; .main .widget". Das main-widget hab ich rausgenommen, jetzt funktionierts! 😀

Leave a Reply to Belora Cancel