B6: Hintergrundbild in WordPress

Hintergrund auf der Homepage gestalten

Die Veränderung in unserem Theme, die ich in diesem Beitrag vorführe, ist wohl die optisch Auffälligste in dieser Beitragsreihe. Dabei sind die nötigen Veränderungen überschaubar. Wir werden ein Hintergrundbild (1) in WordPress mit der Standardfunktion einfügen und die vorhandene Ebene (2), die darüber liegt, im CSS-Code leicht transparent machen. Außerdem werden wir die Ebene oben und unten bündig (3) mit dem Browserfenster machen.

Dazu sind abermals keine Programmierkenntnisse notwendig. Als Browser mit „Element-Untersuchen“ benutze ich Google Chrome. Als Codeeditor kommt Brackets zum Einsatz.

Ausgangslage - Rahmen mit HintergrundAbb.: Hintergrundgestaltung in WordPress – Ausgangslage. Der schwarze Hintergrund (1) wird durch ein Bild ersetzt. Die weiße Ebene (2) wird durchscheinend. Der Abstand der Ebene oben und unten (3) zur Anzeigefläche des Browsers wird gelöscht.

Ein Hintergrundbild in WordPress einfügen

Designauswahl im Backend

4. Wählen Sie im Backend unter Design ‚Hintergrund‘.

Hintergrundbild auswählen

5. Drücken Sie auf ‚Bild auswählen‘.

Hintergrundbild aus der Meediathek auswählen

Hinweis: Die Mediathek öffnet sich.

6. Wählen Sie Ihr Hintergrundbild aus.

Hinweis:

Das hierausgewählte Bild wurde vorher in die Mediathek hochgeladen.

Es handelt sich um das kosten- und lizenzfreie Bild ‘bricks-459299‘ der Mediaplattform www.pixabay.de.

7. Drücken Sie ‚Bild wählen‘.

Hintergrundbild - Einstellungen und speichern

8. Wählen Sie über das Dropdown – Menü ‚Bildschirmfüllend‘.

9. Geben Sie die Bildposition als ‚zentriert‘ an.

10. Speichern Sie Ihre Einstellungen oder Veröffentlichen Sie direkt Ihr Hintergrundbild mit den entsprechenden Einstellungen.

Ergebniszwischstand

Hinweis:

Kurzer Ergebniszwischenstand

(11): Das Hintergrundbild liegt nun hinter der weißen Ebene (12) auf der der Content (Inhalt) dargestellt ist.

(12): Im nächsten Schritt werden wir über den CSS-Code die Ebene transparent(er) machen, wodurch das Hintergrundbild durchscheinen wird.

(13): Im Anschluss werden wir den oberen und unteren Abstand der Ebene zum Browserfenster löschen.

Kurze Anmerkung zum CSS-Code:

Die style.css ist in CSS-Code geschrieben.

Quellcode im Browser untersuchen

14. Drücken Sie die rechte Maustaste und wählen Sie ‚Untersuchen‘.

Hinweis:

Im nächsten Bild  gibt es zusätzliche Codeansichten der dargestellten Seite.

Es wird der HTML – Code der verwendeten ‚Klasse‘ ‚div#page.site‘ (oben) angezeigt und der CSS – Code  im Reiter ‚Styles‘ (unten).

Das Ganze jeweils für das ausgewählte Element auf der Seite.

Quellcode - live im Browser

15. Wählen Sie (mit dem Cursor) die weiße Ebene, um den entsprechenden Code angezeigt zu bekommen.

Attribute für die weiße Ebene identifizieren

16. Um in ‚SH-Manier‘ die richtigen Stellen zu lokalisieren, gehen wir wie folgt vor (die meisten Einstellungen sind durch den Klick auf die weiße Ebene automatisch vorgenommen:

Ziel » Weiße Ebene durchschimmernd zu machen.

▓  Wählen Sie den Reiter ‚div+page.site‘.

▓  Vergewissern Sie sich, dass es sich um die Klasse ‚site‘ handelt.

▓  Suchen Sie unter ‚Styles‘ nach der Klasse ‚.site‘.

▓  » Es finden sich die Einträge ‚margin‘ und ‚background-color.

▓  Um herauszufinden was diese Befehle bewirken, kann man hier (background-color) und hier (margin) nachlesen oder ausprobieren. Letzteres werden wir jetzt machen!

17. Entfernen Sie den Haken. Damit deaktivieren Sie den Befehl. Auf der linken Seite sehen Sie direkt die Auswirkung. Die weiße Ebene wird durchsichtig.

Attribute für den Ebenenabstand

Hinweis:

Aktivieren Sie den Haken wieder. Da die Veränderung nur ‚Live‘ dargestellt wird und nicht gespeichert wird, können Sie auch über ‚F5‘ die Seite neu laden damit der Ursprungszustand wiederhergestellt wird.

18. Entfernen Sie den Haken des Margin – Befehls für die Klasse ‚.site‘. Sie deaktivieren damit den Befehl. Die weiße Ebene fühlt randlos das Browserfenster. Der Steinhintergrund liegt deckungsgleich darunter.

Hinweis:

Diese Befehle haben wir für unsere Zielerfüllung gesucht!


Exkursion ‚backgroundcolor‘:

Hintergrundbild - Exkursion 1 und 2

Der (Hintergrund-) Farbe einer Internetseite kann man über verschiedene Anweisungen Farben zu ordnen. Da wir die Transparenz mitangeben (Alphatransparenz) wollen, brauchen wir den Befehl. ‚rgba‘ (Rot, Grün, Blau, Alphatransparenz).

Die ‚rgb‘ – Werte werden jeweils als ganze Zahlen von 0 – 255 angegeben.

In Prozent bzw. in der Spanne von 0 -1 wird die Alphatransparenz angegeben. Kommawerte sind zulässig, wobei die Schreibweise für das Komma der Punkt ist!

Ein Beispiel für einen kompletten CSS-Befehl ist:

background-color: rgba (123,147,159,0.75);

Exkursion ‚margin‘:

Der Befehl ‚margin‘ gibt Abstände von einem Element zu einem übergeordneten Element an.

Hier wäre es unsere weiße Ebene zum Browerfenster.

Es gibt verschiedene Schreibweisen und Werteangaben, die benutzt werden können.

Eine Möglichkeit für verschiedene Schreibweisen stelle ich hier vor.

margin: 15px;

» Das Element hat zu allen Seiten den festen Abstand ‚15 Pixel‘.

margin: 15px 38px;

» Das Element hat nach oben und unten den festen Abstand ‚15 Pixel‘. Nach links und rechts den festen Abstand von 38 Pixeln.

margin: 15px 38px 43px 52px;

» Das Element hat folgende feste Abstände:

oben = 15 Pixel

rechts = 43 Pixel

unten = 38 Pixel

links = 52 Pixel


Auf zur Umsetzung!

Wir werden die Veränderungen in obiger Art durchführen und den entsprechenden CSS-  Code dann in unser Childtheme kopieren.

Weiße Ebene im Browser durchschimmernd machen - live

19. Geben Sie für die weiße Ebene eine Alphatransparenz von 0.8 an, um das Erscheinungsbild auf der linken Seite zu erhalten.

Der vollständige Befehl lautet:

background-color: rgba(255,255,255,0.8);

Ebenenabstand live im Browser verändern und veränderten Quellcode kopieren

20. Um den Abstand der weißen Ebene oben und unten zum Browserfenster zu löschen, geben Sie ein margin von 0px an.

Der vollständige Befehl lautet:

margin: 0 21px;

21. Markieren Sie sich den veränderten Codeteil und kopieren Sie diesen (in den Zwischenspeicher).

Style.css im Childthemeordner

22. Wechseln Sie im Explorer in den Childthemeordner, den wir in einem vorherigen Beitrag angelegt haben.

» C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen-child

23. Öffnen Sie die stlye.css mit einem geeigneten Editor, z.B. Brackets.

CSS - Code in Brackets einfügen

24. Fügen Sie Ihren kopierten Text unter die ‚@import – Anweisung‘ ein.

Da die beiden Befehle zur selben Klasse ‘site‘ gehören, können  Sie die Befehle in einer Klassenangabe zusammenführe.

Speichern Sie die erweiterte style.css ab.

Hinweis:

Klassen werden in CSS immer mit einem vorangestellten ‚.‘ definiert.

Öffentliches Endergebnis - Hintergrundbild in WordPress mit transparenter Ebene darüber

Hinweis:

Die Veränderungen sind nun dauerhaft umgesetzt.

 

 

Schreibe einen Kommentar

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