Hintergrundbild auf komplette Monitorgröße

    Hallo ihr, ich habe in WP einen Weg gefunden um o.g. Vorhaben zu realisieren. Ginge es aber auch, das auf jeder Seite ein anderes Hintergrundbild angezeigt werden kann? Und wenn ja wie? :sad: Danke für eure Hilfe und Grüße Michael

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Mir fallen auf Anhieb Custom Fields, Conditional Tags oder Beitragsbilder ein. Die schön im header verpackt und es sollte klappen.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Hallo und danke für die schnelle Info. Also in Custom Fields und Conditional Tags müßte ich mich erst einarbeiten :lol: Zu den Beitragsbildern: Ich setze da in jeder Seite das jeweilige Hintergrundbild als Beitragsbild und dann? Muß ich dann an die header.php ran? Gibt es da einen Code zum einbinden? Fragen über Fragen... :razz: Danke für die Hilfe.

    Zitat von wpmike70

    Muß ich dann an die header.php ran?


    ja

    Zitat von wpmike70

    Gibt es da einen Code zum einbinden?


    nein. Hängt auch stark vom verwendeten Theme ab.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Den Hintergrund auf komplette Monitorgröße zu bringen, geht nicht. Auf die Browsergröße schon. ;)

    Es gibt verschiedene Möglichkeiten, das zu realisieren.

    Beispiel: https://wordpress.org/plugins/simple…ckground-image/ - setzt allerdings nur 1 Bild für die gesamte Webseite.

    Wie man in CSS ein Hintergrundbild als Cover setzt, solltest Du wissen. Ansonsten gibt es auch ein jQuery-Plugin, das relativ handlich ist: http://srobbin.com/jquery-plugins/backstretch/

    Von der Umsetzung her würde ich vermutlich das Beitragsbild verwenden, welches Du ja auf jeder Seite individuell wählen kannst. Ggf. kann man hier das Theme um eine zusätzliche Option ergänzen, das einen Schalter beim Beitragsbild hinzufügt: "Als Hintergrundbild verwenden".

    Die andere Alternative über Custom Fields wurde ja bereits genannt.

    In einer header.php des Themes kannst Du das dann auslesen und per CSS setzen (html, body oder irgendein wrapper-div).

    Hallo und danke für die Info. Bekomme nun langsam das Flattern und habe Angst:-o Mmmmh... Ich verwende als Theme "Weaver II Pro". Da gibt es eine Advanced Option "Background Image" und dort kann ich das entsprechende Bild z.B. da: "Full Screen Site BG Image" einsetzen und es wird ein Hintergrundbild über den gesamten Monitor äääh Browser :lol: aufgezogen. Allerdings wird dieses Bild auf allen Seiten gezeigt. Das Backstretch ist ja so wie ich das verstehe eine Slideshow. Ich hätte aber gerne zu jeder Seite ein festgelegtes/stehendes Hintergrundbild. Bei statischen Websites benutze ich da immer so ein Javascript mit Namen "SuperSized". Könnte man mir als PHP-nichtExperte aber PHP Code einfügen-fähigen User eine kleine Anleitung geben oder einen guten Link zu dieser Problematik? Danke Michael

    Steht alles oben - vorgekauten Code zum rumbasteln liefert Google.

    Es geht auch ohne "Rumpfuschen" rein über CSS - macht aber nur Sinn, wenn die Seiten sich nicht ändern.

    Jede Seite (und jeder Post) hat in WordPress eine eigene Klasse, die dann auch im BODY-Tag bei der Ausgabe zu finden ist (bspw. [COLOR=#1A1AA6][FONT=monospace]page-id-1258[/FONT][/COLOR]).

    Für diese kannst Du dann einfach ein Hintergrundbild angeben. Ggf. sind Anpassungen für den BODY-Tag notwendig, damit das dann auch mit dem Background-Cover klappt.

    Wenn Du das am Ende der style.css des Themes verankerst, wird auch das Standard-Cover überschrieben.

    [size=12][FONT=arial][COLOR=#222222]Hallo, ja ohne rumpfuschen über CSS wäre mir auch lieber! Meintest du das CSS { background-size: cover; }? Weil bei mir ist da das Hintergrundbild nicht immer vollflächig. Außerdem ist es angeblich erst ab IE9+ geeignet.

    Zitat

    macht aber nur Sinn, wenn die Seiten sich nicht ändern.

    Was meinst du damit genau? Einige Seiten ändern sich später nur im Inhaltsbereich. Layout bleibt immer fest.

    Zitat

    Für diese kannst Du dann einfach ein Hintergrundbild angeben. Ggf. sind Anpassungen für den BODY-Tag notwendig, damit das dann auch mit dem Background-Cover klappt.

    Ich lege also im CSS (im welchem: style.css des Themes?) Klassen fest z.B. ".page-id-1258 { background-image: url(../images/bild.jpg); background-size: cover; }?

    Wäre dankbar, wenn ihr mich noch ein wenig an die Hand nehmen würdet:lol: [/COLOR][/FONT][/SIZE]

    a) Wenn Du eine feste Seitenstruktur hast, kein Problem.
    b) Wenn sich ständig Seiten ändern und/oder ergänzen, musst Du immer das CSS anpassen.
    c) Ja, in der style.css des Themes.
    d) Bitte richtig machen:

    Code
    .page-id-123{
   background: url(pfad/zum/bild.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    Um overhead zu vermeiden, kannst Du die background-size auch auf den BODY-Tag legen, dann brauchst Du in den .page-id-123 nur das Bild selbst anzugeben. Try it!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden