Sonntag, 23. August 2015

100% Hintergrundbild in Blog einbauen

Oder: Fullscreen Background Picture. 

Ich habe (um Urheberrechte nicht zu verletzen) einfach ein Foto geschossen.
Kein schönes Bild, aber für ein Beispiel sollte es reichen.
Ich werde also folgendes Bild als Hintergrund verwenden.
Meine Maße sind 1920x1080 Pixel.
(Zu den Maßen siehe Vermerk ganz unten bei PS)


Da ich selber auf meinem Blog kein Hintergrundbild möchte, habe ich einen Blog angelegt um es vorzuführen.
Ich habe ein ganz simples "Einfach-Layout" gewählt, der anfangs so aussieht:


Wenn ich den normalen Weg über das Dashboard nehme
Zur  Verdeutlichung:


Über:
Vorlage>>Anpassen>>Hintergrund>>Hintergrundbild
lande ich hier


Dort wähle ch mein Hintergrundbild aus und lade es hoch.


Das Ergebnis sieht dann so aus:


Und jetzt sieht man schon, dass das ganze nicht so richtig passt.
Wenn wir kleiner zoomen sehen wir es besonders gut.


Grauenhaft. Das bild wird gekachelt/wiederholt sich.
Und genau das wollen wir ja nicht.
Deshalb müssen wir mit etwas CSS nachhelfen.
Wir müssen die bereits vorhandene CSS überschreiben und so anpassen, wie wir sie brauchen.

Dafür haben wir zwei Möglichkeiten:
1. Über unser Dashboard:
    Vorlage>>Anpassen>>Erweitert>>CSS hinzufügen
Dann würden wir hier unsere Anweisung eingeben:


oder
2. In dem wir direkt in den Code hinein gehen
    Vorlage>>HTML bearbeiten
Dann würden wir hier landen:


Ich bevorzuge die zweite Variante, weil man dann weißt wo man es hingeschrieben hat und es dann, wenn man es ggf nochmal braucht, sofort finden und verändern kann.

Diese Möglichkeit werde ich zeigen.
Die, die sich nicht an den Quellcode trauen, wählen eben die andere Variante.
Jedoch ist es relativ einfach, so dass Ihr kein Bammel haben müsst.
Ihr könnt vorher ja ein Backup eures Designs machen und wenn was schief geht einfach neu hochladen. Auf Wunsch setze ich die Tage auch darüber was online. Einfach anschreiben :)


Unsere CSS muss vereinfacht gesagt sagen, dass wir ein Bild haben wollen, welches sich in Höhe und Breite anpasst und auch so stehen bleibt.
Und da ich Euch nicht tot quatschen möchte, zeige ich jetzt die Anweisung:

html, body {
background: url(hier kommt der Pfad zum Bild) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Bleibt nur die Frage: Wie ist der Pfad zum Bild, welches wir bereits eingefügt haben?
(Gibt nämlich auch andere Möglichkeiten. Lese bitte hierzu Vermerk ganz unten bei PS)

Das schnellste und sicherste ist, in den Quellcode zu gehen und den Pfad zu suchen.
Dazu gehen wir so vor wie im bisher letztem Bild:
Vorlage>>HTML bearbeiten

Dort sehen wir an der Zeile 9 (im original.kann abweichen) einen Pfeil.
Wenn wir darauf klicken öffnet sich weiterer Code.

Was wir jetzt brauchen ist eine bestimmte Zeile.
Diese fängt so an:
<Variable name="body.background" description="Body Background"

Wir können sie suchen oder suchen lassen.
Courser ins Fenster klicken und dann Strg+F drücken.
Darauf hin öffnet sich ein Suchfenster.
Dort kopieren wir den Suchegriff hiein und drücken Enter.

Beim runterscrollen sehen wir dunkel hinterlegter text und unmittelbar darunter unser gesuchter Pfad.
Die Angabe fängt mit url an.
Mein Pfad lautet also:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0rWWjD0ctwS9XWo-4v6O0oGXzDF5aK0NnMoRQxHXwL16UaoNStmWoR79N1GHRiwNEScVz34OVT1XtBXODk2WLvHoYPRuGuq_VA-OuK0OQH5MiF9zU7nSg4z5m4sE0sQbPNZ_fH4tBre3/s0/rs-1920x1080.jpg

Dementsprechend lautet meine CSS:

/* 100% HINTERGRUNDBILD
----------------------------------------------- */
html, body {
background: #000 url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0rWWjD0ctwS9XWo-4v6O0oGXzDF5aK0NnMoRQxHXwL16UaoNStmWoR79N1GHRiwNEScVz34OVT1XtBXODk2WLvHoYPRuGuq_VA-OuK0OQH5MiF9zU7nSg4z5m4sE0sQbPNZ_fH4tBre3/s0/rs-1920x1080.jpg) no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

Hinzugefügt habe ich lediglich #000, denn ich möchte beim öffnen einen schwarzen Hintergrund laden und nicht das originale orange. Wollt Ihr es nicht,dann weglassen.
Und um es wieder zu finden ein Kommentar eigefügt

Jetzt brauche ich nur meine CSS-Anweisung in den in den Quellcode hinein zu kopieren.
Wichtig ist,dass wir die bereits vorhandene Anweisung überschreiben.
Das heisst hinter der bereits vorhandenen plazieren.




Hier das Ergebnis


Und wenn wir kleiner zoomen sehen wir

Damit hätten wir unser Ziel erreicht.

Was man nocht machen könnte, wenn man es mag, ist eine transparenz einbauen, wie auf diesem Blog .


PS
Zur Bildgröße/Auflösung
Leider sind die Zeiten vorbei, wo es nur zwei Bildschirmauflösungen gab.
Das macht das Einbinden eines solchen Hintergrundes etwas kompliziert.
Man kann also nie sagen, welche Bildgröße die optimale ist.
Ein bißchen Schund ist also immer.
Kaum schaust du mal weg, ist schon wieder eine neue Auflösung da.
Besonders bei Mobilgeräten weißt man nie was am Ende dabei raus kommt.
Das solltet Ihr dabei bedenken.
Ich persönlich kann auf solche Sachen gerne verzichten, aber wenn man es mag, warum nicht?

Zum Bildpfad:
Ihr könnt natürlich ein Bild aus Eurer Sammlug nehmen.
Den Pfad direkt in die CSS kopieren.
Ihr müsst also nicht vorher das Bild hochladen.
Ausserdem könnt Ihr auch einen externen Link nehmen.
Beispielsweise ein Bild, welches Ihr auf einem Server habt.