Hintergrundbild automatisch skalieren

    Hallo liebe Forenuser,

    ich bin ein Neuling was WordPress angeht und habe nun natürlich einige Startschwierigkeiten, bei deren Lösung ich hier auf Hilfe hoffe (für Laien verständlich bitte).

    Ich möchte gern wissen, wie man ein Hintergrundbild automatisch skalieren bzw. an den jeweiligen Bildschirm anpassen kann. Zusätzliche Schwierigkeit ist, dass die volle Höhe des Hintergrundbildes angezeigt werden soll und bei der Anpassung der Bildbreite das Seitenverhältnis beachtet werden muss.

    Als soll immer die volle Höhe des Bildes angezeigt werden, während in der Breite (je nach Bildschirm) ggf. etwas beschnitten sein kann. Das Seitenverhältnis muss aber stimmen, so dass das Bild nicht verzerrt wird.

    Verschiedene gegoogelte Lösungen waren irgendwie zu unverständlich für mich :sad:. Ich verwende übrigend das Theme WeaverII in der Basic-Version.

    Liebe Grüße
    Thomas

    • 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

    Zitat

    Ich verwende übrigend das Theme WeaverII in der Basic-Version.

    bitte solche Angaben immer als link zum Theme; wir fangen nicht an, das Netz zu durchwühlen.
    Welche Ideen im Netz hast du nicht verstanden? Beispiele?
    Wie sieht dein HG-Bild aus? Aufbau?

    Dem Hintergrundbild die CSS Eigenschaft background-size: cover; geben.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Zitat von T2A9G

    Zusätzliche Schwierigkeit ist, dass die volle Höhe des Hintergrundbildes angezeigt werden soll und bei der Anpassung der Bildbreite das Seitenverhältnis beachtet werden muss.


    dann nimm lieber

    Code
    background-size:contain;

    Kommt drauf an ob das Bild höher ist als breit oder umgekehrt.

    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]

    Einmal editiert, zuletzt von SirEctor (25. September 2014 um 18:30)

    Zitat von SirEctor

    dann nimm lieber

    background-size:contain;

    Dann wird aber der Hintergrund möglicherweise nicht mehr ausgefüllt. Hintergrundbilder sollten immer im richtigen Verhältnis erstellt werden, also auf ein gängiges Bildschirmformat z.B. 2560x1440. Mit 'cover' wird es dann sauber skaliert und bei einem verkleinerte Browserfenster ein Stück abgeschnitten. Das kann man aber durch die entsprechende Positionierung des 'wichtigen' Bildinhaltes steuern.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Wie wäre es mit:

    Code
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;

    Damit wird es immer auf 100% in der Höhe skaliert und die Breite paßt sich proportional an. Außerdem ist es zentriert.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Du hast recht, mensmaximus. Ich arbeite auch lieber mit "cover". Aber manche Kunden bestehen auf "contain", obwohl es unschön wirkt.

    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 liebe Forenuser,

    wow, dass waren ja gleich viele antworten und dann noch so schnell, danke an alle! Ähnliche "Befehle" bzw. Tipps habe ich auch schon in einigen ergoogelten Ergebnissen gelesen. Sinngemäß habe ich natürlich erfasst, was ihr mir sagen wollt. Allerdings weiß ich beim besten Willen nicht, wo ich diese Codezeilen einfügen (Datei/genaue Position) muss.
    Das Bild liegt übrigends im Format 2703x1369 Pixel als jpg vor, ist also insgesamt recht groß und insbesondere breit. Bezogen auf einen normalen Monitor. Vermute mal, das es dann immer in der Breite beschnitten werden müsste.
    Der Code bzw. die Erklärung dazu von Putzlowitsch erscheint mir (als Laie) als genau das, was ich gern möchte. Nur wie gesagt - wohin mit dem Code. Für weitere Hilfe vielen Dank!

    Liebe Grüße
    Thomas

    Da Du uns keinen Link gibst, wo wir den entsprechenden Code sehen könnten, können wir Dir leider nicht viel weiter helfen.

    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 SirEctor,

    bin mir jetzt nicht so sicher, auf was ich verlinken soll (welchen Code??). Also die URL zur Seite, auf welcher ich zu Testzwecken das Hintergrundbild eingefügt habe ist medien-tarifvergleich.de (falls Du das meinst). Wollte nur keine Schleichwerbung machen.

    Gruß Thomas

    Such in der style.css Deines Themes nach body
    Dort trägst Du dann zusätzlich noch

    background-size: auto 100%;

    ein. Der Rest stimmt schon.

    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 SirEctor,

    in der style,css habe ich nur folgende Zeilen mit "body" gefunden, weiß aber nicht, ob ich dort richtig bin? Außerdem steht da ein englischer Warnhinweis, dass diese Datei nicht bearbeitet werden sollte!?

    /* body has global settings for others to inherit */

    body {
    background:#FFF;
    color:#222;
    font-family:"Times New Roman", Times, serif;
    font-size:12px;
    line-height:1.5; /* global line height */
    margin:0;
    padding:20px 20px; /* margins around whole site */
    }

    input, textarea {
    background-color:#f0f0f0;
    color:#444;
    font-size:90%;
    }
    hr {
    background-color:#ccc;
    border:0;
    height:1px;
    margin-bottom:1.5em;
    }
    /* --Text elements */
    p, #content p {
    margin-bottom:1.5em;
    }
    strong {
    font-weight:bold;
    }
    pre {
    font-family:Courier, monospace;
    font-size: .75em;
    margin-bottom:1.625em;
    overflow:auto;
    padding:1em 1em;
    white-space:pre-wrap;
    }

    Schreib es mit in die Klammer von body. Sicher die Datei einfach vorher, falls Du Angst hast das etwas schief geht.

    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 SirEctor und gericoach,

    habe in der style.css den entsprechenden Befehl eingetragen (s.u.). Leider hat sich nichts geändert, zumindest nichts für mich Sichtbares. Habe ich evtl. etwas falsch gemacht?

    Viele Grüße Thomas

    /* body has global settings for others to inherit */

    body {
    background:#FFF;
    background-size: auto 100%;
    color:#222;
    font-family:"Times New Roman", Times, serif;
    font-size:12px;
    line-height:1.5; /* global line height */
    margin:0;
    padding:20px 20px; /* margins around whole site */
    }

    An der Stelle ist ist nicht das Hintergrundbild definiert.
    Suche nach einer Klasse 'body.custom-background', die aber nicht in der normalen style.css zu finden ist. Die CSS-Klasse wird Inline im Header eingefügt. Hat was mit dem Theme-Support für diese Klasse zu tun:
    http://codex.wordpress.org/Custom_Backgrounds

    An welcher Stelle das im Theme zu finden ist, kann ich aber nicht sagen.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Danke erst mal für alle Tipps! Wenn man allerdings nicht weiß, in welcher Datei man eines bestimmten Code suchen/einsetzen soll ist das ja für einen Laien nahezu unmöglich zu bewerkstelligen. Im Dashboard werden unter "Design" und "Editor" rechts unten ja unzählige Dateien aufgelistet. Wo soll man da nur anfangen. :-(

    Mit dem Namen backround ist da nichts zu finden. Hab mir das mit Wordpress schon etwas leichter vorgestellt, aber bei den unzähligen Themes ist eine allgemeine Hilfe auch sicher schwierig.

    Falls also jemand mit dem Theme Weaver II Erfahrung hat und mir weiterhelfen kann, vielen Dank im voraus!!!

    Gruß Thomas

    Zitat von T2A9G

    habe in der style.css den entsprechenden Befehl eingetragen (s.u.). Leider hat sich nichts geändert, zumindest nichts für mich Sichtbares. Habe ich evtl. etwas falsch gemacht?


    Der Code war da genau richtig. Nutzt Du zufällig ein Cache-Plugin o.ä.? Dann deaktiviere das mal.

    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, also da ich nich mal weiß, was ein Cache Plugin ist, nutze ich sicher keins :smile:. Hab mal nachgeschaut, aktiv sind die 2 Plugins "Contact Form 7" und "Weaver Theme Extra". Wobei ich mit dem letzteren nichts anfangen kann!?

    Hallo,

    nun weiß ich nicht, ob Dein Problem inzwischen gelöst ist. Hier im Forum sieht es jedenfalls nicht so aus. Ich bin selber Servicetechniker, allerdings in einer völlig anderen Branche und trotzdem einer derjenigen, die ein Problem versuchen zu lösen und nicht noch weiter Verwirrung zu stiften.

    Auch ich hatte heute versucht, ein Bild im Hintergrund zu positionieren. Dafür habe ich all die guten Ratschläge, die Dir hier gegeben wurden, äußerst erfolglos umgesetzt. Das Problem ist, wie Du auch schon ahntest, nicht allein mit einer oder zwei Zeilen in der lokalen style.css-Datei zu lösen. Nach Stunden des Probierens mit cover content 100% und repeat und no repeat hatte ich schliesslich die Faxen dicke und nahm ein Plugin, welches mir mein Bild SOFORT und genau dort hin plazierte, wo ich es haben wollte. Schau mal beim „Background Manager“ nach.

    Gruß

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden