Hintergrundbild in Beitrag einfügen/ändern

    Hallo Zusammen,


    ich möchte gerne einem Beitrag (Main Content) ein Hintergrundbild zufügen.


    Ich habe bereits recherchiert, dass das evtl. über Menü - Seitenanzeige - Seitenklasse funktioniert, aber irgendwie funktioniert das bei mir nicht...


    Geht das vielleicht doch anders?


    Ich freu mich über Unterstützung, frühabendliche Grüße

    Tanja

    Hallo Elwood,

    vielen Dank für deine Antwort. :)

    Genau diese Anleitung hatte ich gefunden und es über mit der Angabe Menü - Seitenanzeige - Seitenklasse versucht.

    Ich habe das Wort hintergrundbildtest eingefügt.

    Leider wird bei mir dadurch kein DIV angesprochen, dass ich dann wiederum mit css ansprechen könnte sondern der BODY.


    Ich habe mal ein *jpg angehängt.

    Was mache ich falsch?

    Gibt es weitere Möglichkeiten ein Hintergrundbild in einen Beitrag anzufügen?

    Sonnige Grüße an alle!

    Vielleicht liegt es am Template. Hast Du mal im Protostar probiert?
    Wenn Du für den beitrag einen Menüpunbkt hast, kannst Du auch die item-ID verwenden.

    Mehr können wir aber nur sagen, wenn wir einen Link zum problem haben.

    Zitat von goldfisch2016

    Gibt es weitere Möglichkeiten ein Hintergrundbild in einen Beitrag anzufügen?

    Direkt im Beitragseditor. Musst dann halt ein eigenes Div-Konstrukt bauen.

    Hallo Indigo66,

    ich habe es jetzt mal mit Protostar versucht und interessanterweise gab es in der Ansicht keine Veränderung.

    Leider bleibt auch das BODY Problem bestehen.


    Hier der Link: *** (von Admin gelöscht)


    Unter der Navi sind 2 Module (parallel) und da mir da das Verhalten des Bildes (beim Verkleinern des Browsers klebt es oben) nicht gefällt

    versuche ich nun den Text in einem Beitrag mit Hintergrundbild...

    Zitat von goldfisch2016

    Ich habe das Wort hintergrundbildtest eingefügt.

    Leider wird bei mir dadurch kein DIV angesprochen, dass ich dann wiederum mit css ansprechen könnte sondern der BODY.

    Ist eindeutig identifizierbar <body class="tm-isblog hintergrundbildtest"> und in Verbindung mit id="main-content" kannst Du das Hintergunsbild setzten.

    Der Selektor heißt demnach .hintergrundbildtest #main-content.

    Versuche es aber zuerst mal damit:


    Erweiterungen > Templates > jp-maximum > Otionen > Layout


    Scroll dort nach unten, bis die Einstellungen für Grid sichtbar werden.


    Suche dort die Position "top-b" uns wähle in der Spalte "Responsive" die Darstellung "Stack on phones"



    Das wäre jedenfalls einfacher, als ein Hintergrundbild einzubauen. Je nach Farbe wird bei einem Hintergrundbild der Text ziemlich unleserlich.


    Hallo Anka,


    vielen Dank. Das hatte ich bereits versucht, hat jedoch leider nichts gebracht. Ich habe tatsächlich gehofft, dass ich das einfacher lösen könnte.


    Mir war auch nicht klar, dass es soo kompliziert ist ein Hintergrundbild zu setzen.




    Hallo Indigo66, ich habe es mit


    .hintergrundbildtest #main-content { background-image: hintergrundwie.jpg; }


    versucht, aber wahrscheinlich irgendetwas falsch gemacht. Klappt jedenfalls noch nicht.

    Zitat von goldfisch2016

    aber wahrscheinlich irgendetwas falsch gemacht.

    Ja die Syntax ist falsch und Du musst schon auch den Pfad zum Bild angeben: https://developer.mozilla.org/…/Web/CSS/background-image


    Zitat von goldfisch2016

    Mir war auch nicht klar, dass es soo kompliziert ist ein Hintergrundbild zu setzen.

    Ist es nicht, man muss es nur richtig machen.

    Ja, zu wissen wie. Das ist mal wieder das Problem...


    Vielen lieben Dank für den css Link! :-))


    Ich hatte nun eigentlich gehofft, mich für die richtige Syntax entschieden zu haben, doch das Bild wird noch immer nicht angezeigt.


    .hintergrundbildtest #main-content {

    background-image: url("***");

    }

    Zitat von goldfisch2016

    Hallo Anka,


    vielen Dank. Das hatte ich bereits versucht, hat jedoch leider nichts gebracht.

    Bist du sicher, dass du es im richtigen Layout versucht hast?




    Zitat von goldfisch2016

    .hintergrundbildtest #main-content { background-image: hintergrundwie.jpg; }

    ... Klappt jedenfalls noch nicht.

    Dann versuche es mit:

    CSS
    .hintergrundbildtest #main-content{
background-image: url("***") !important;
background-repeat: no-repeat !important;
}

    Hallo Anka,

    ja, ich habe es im richtigen Layout versucht. Zudem ist die Einstellung "Stack on Photos" in diesem Template voreingestellt. :)



    Ich habe den Code erweitert und das Bild wird trotzdem nicht als Hintergrundbild im Beitrag angezeigt.

    Interessanterweise wird es bei Untersuchen - Elemente gelistet (siehe Anhang) jedoch im Browser nicht angezeigt.

    Ich bin ratlos...

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Bild gelöscht

    Soo, jetzt wird das Bild angezeigt, keine Ahnung was da los war...

    Doch leider ist das trotzdem nicht das, was ich haben möchte. Da das Bild (bei Verkleinerung der Browseransicht) seine Größe nicht ändert und der Text in das Bild hineinrutscht.


    Die Ursprüngliche Idee mit den zwei Modulen (jetzt wieder oben drüber) war wahrscheinlich die bessere Idee, wobei es ja auch nicht richtig funktioniert hat.


    Mein Ziel ist, dass der Text neben dem großem Bild steht und beide proportional gleich groß bleiben, wenn die Browseransicht verkleinert wird.


    Im Augenblick ist es so, dass das Bild nach oben weg rutscht und schnell kleiner wird.

    Kann man das Bild unten "fixieren"?

    Guten Morgen Anka,

    ja grundsätzlich klappt das schon. :) Das Problem, meiner Kundin ist, das ihr das Verhalten des Bildes nicht gefällt.

    Sie möchte dass, wenn ich den Browser langsam ( mit der Maus) verkleinere das Bild nicht nach oben weg rutscht, sondern weiterhin unten verankert ist.

    Letztendlich so, wie sich eine Header-Grafik verhält, die immer vollständig ihre Größe an die Bildschirmbreite anpasst. Nur leider kann ich in einem Header den Text nicht so formatieren wie gewünscht... Vielleicht sehe ich auch den Wald vor lauter Bäumen nicht mehr und es gibt eine ganz andere Lösung für dieses Problem?

    Zitat von goldfisch2016

    Sie möchte dass, wenn ich den Browser langsam ( mit der Maus) verkleinere das Bild nicht nach oben weg rutscht, sondern weiterhin unten verankert ist.


    Wenn das gewünscht ist, muss das Bild als Hintergundbild als CSS eingefügt werden mit background-size: cover. Dann ist das Bild evtl. nicht mehr so einfach auszutauschen, außer Du versuchst es als Modulhintergrundbild.

    Zitat von goldfisch2016

    ich möchte gerne nachträglich meine Beiträge editieren (Domains löschen) und kann das nicht.

    Es ist nicht möglich seine Beiträge zu editieren. ich glaube nur die ersten 15 Minuten.
    Es gibt oft Verfälschungen im Nachhinein durch solche Änderungen.


    Bitte in deinem Fall einen Moderator/Admin, eine Änderung vorzunehmen