Hintergrund ändern bei Blogger-Blogs

Hintergrund-aendern-bei-blogs
Eine der ersten Fragen, die mir für Girls Guide Guide To Blogging gestellt wurde, dreht sich um den Hintergrund von Blogger-Blogs (Blogspot Blog) und wie man dort ein Hintergrundbilder einfügen kann.
Blogspot ist, wenn es um Designfragen geht, extrem flexibel und lässt fast alles zu, was du dir vorstellst. Die Zauberformel hierfür liegt im HTML-Bereich deines Blogger-Blogs.
Unter Dashboard -> Layout -> HTML bearbeiten lässt sich das Design nach eigenen Wünschen und Ideen anpassen.
Im CSS Bereich sucht ihr mit Hilfe der Browser-Suchfunktion Strg + F  (beim Mac cmd + F) nach:
body {

Was ihr dann findet, sieht in etwa so aus:

<div><code>body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}</code></div>

Für den Hintergrund entscheidend ist folgender Code-Schnipsel:
background:$bgcolor;
Hier wird angegeben, dass der Hintergrund (=background) den Einstellungen der Farbe $bgcolor entsprechen soll. Die Farbe wird bekanntlich ja unter Einstellungen -> Schriftarten und Farben auswählen festgelegt, aber da wir ja genau die verändern wollen, ersetzen wir diesen Teil durch:
background:#ffffff url(www.hierkommtdiebildurlrein.jpg) no-repeat;
Mit diesem Code wird künftig ein Bild als Blog-Hintergrund angezeigt, welches sich unter www.hierkommtdiebildurlrein.de befindet.
Um diese Bild-URL zu bekommen, müsst ihr zuvor euer Bild, das im Hintergrund sein soll, irgendwo hochgeladen haben (z.B. bei Flickr).
Das no-repeat am Ende zeigt an, dass sich das Bild nicht horinzontal oder vertikal wiederholt. Wollt ihr allerdings dass es sich wiederholt, gebt hier nur repeat ein.
Und das war es eigentlich auch schon!
Kleiner Tipp: Bevor du dich an das Design wagst, kopiere dir sicherheitshalber den gesamten Code im HTML Bereich in einen Texteditor und speicher dies ab. Sollte mal etwas schief gehen, kannst dann immer noch darauf zurückgreifen und diesen wieder im HTML Bereich einfügen.
Wenn ihr lediglich die Farbe des Hintergrunds ändern wollt, aber Bild als Hintergrund wollt, geht dies bedeutend einfacher. Unter Layout -> Schriftarten und Farben auswählen kann man die Hintergrundfarbe für seinen Blog auswählen.

6 Comments

  • Verena sagt:

    Hallo ich habe eine Frage die hoffentlich gelöst werden kann. Ich habe das mit dem Hintergrund ändern gemacht, jedoch ist meine sidebar und post zeile nicht weiß, sondern auch von hintergrund bedeckt. wenn ich bei anderen blogs gucke die das auch so machen ist das nicht. Ich hatte schonmal eine gefragt, die das so gemacht hat, aber sie meinte nur ich solle mal bei outter-wrapper in der html gucken, da konnte ich jedoch nichts finden. Ich hoffe sehr mir kann geholfen werden. Schonmal danke.:)

  • Maggi sagt:

    Hallo,
    dein Tipp war sehr hilfreich,
    allerdings gelangt das Hintergrundbild mit deinem Code nicht in die Mitte.
    Also habe ich noch etwas nachgeschaut.
    Und den Code folglich geändert
    background-image: url(Bild-Url);
    background-position: center; background-repeat:no-repeat;
    Jetzt habe ich das Problem,das mein Bild nicht in voller Größe angezeigt wird.
    Wie ändere ich die Größe des Bildes im Code?
    Ich bedanke mich vorab.

  • Alice sagt:

    Hilfe, auch wenn ich body { in die suchfunktion im css bereich eingebe, finde ich den gesuchten part nicht!
    ich freue mich über jede antwort!

    LG

  • Marlies sagt:

    Hallo
    wollte gestern den HInterfrund ändern wie ich das immer gemacht habe. Aber es erscheint dann nur der Hintergrund code doch der Hintergrund ist nicht sichtbar.
    Kann jemand helfen??? glg Marlies

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *