Grafik auf die Sidebar setzen

  • Hallo!

    Ich habe eine "märchenhaften" Stil bei dem ich gerne auf die linke Sidebarbox eine Grafik an diese Stelle platzieren möchte :)

    soll soll das ganze aussehen:

    Natürlich soll die Elfe auch auf der rechten Sidebar sitzen ;)

    Meine Frage ist nun: wie spreche ich das in der CSS an?

    Oder muss man dafür eine Template erstellen?

    Wenn ja, was muss in der entsprechende Template drin sein?

    Wäre super, wenn der eine oder andere mir da 'nen Tipp geben könnte... oder mehrere ;)

  • Du brauchst keine Template-Änderung dafür, CSS reicht aus :)

    So würdest du eine Grafik genau auf die rechte und linke Sidebar setzen:

    CSS
    .sidebar {
            padding-top:100px; //Höhe des Hintergrundbildes
            background-image: url('/elfe.png');
            background-position: center 0px;
            background-repeat: no-repeat;
            background-size: auto 100px;
        }

    So habe ich es auf meiner Seite https://mariomaker.de umgesetzt :)

    Um aber das Bild so wie auf deinem Screenshot etwas nach unten versetzt einzusetzen, müsstest du aber das ::before der jeweils ersten Box nutzen:

    Das Bild hier ist 100px hoch, und überlappt die erste Box in der Sidebar um 10px. Soll das Bild die Box mehr oder weniger überlappen, so musst du die beiden margin-top-Werte anpassen. Analog musst du natürlich auch height und background-size anpassen, wenn dein Bild eine andere Größe hat :)

  • Jaaa, hat wunderbar geklappt, vielen <3lichen Dank! :*

    Ich konnte sogar auf jede Sidebar eine andere Grafik setzen :thumbup:

              

    Nochmals vielen Dank für deine Unterstützung, Semako! :*


    Goli's Welt
    Die Community für Photoshop und mehr

    Edited once, last by Goli Ath (June 25, 2019 at 10:47 PM).

  • gibt es da eine möglichkeit für die mittlere box auch?

    Natürlich ist das möglich. Nennt sich aber nicht Box, sondern Content.;)

    Um das ein bisschen einzugrenzen sollte man es mobil (Breakpoints) ausblenden.

    Falls es nur in bestimmten Templates angezeigt werden soll

    Bitte darauf achten das das Hintergrundbild nicht zu bunt (verspielt) wirkt, da ansonsten die Lesbarkeit darunter leidet!!

    Evtl. Schriftfarbe ändern.

  • Habe diesen Code ebenfalls eingebaut, zum einen im Forum und zum anderen

    in meinem VieCode-Shop (Standalone-Version), da funktioniert er auch :thumbup:

    und ich muss sagen, das sieht echt klasse aus :love:

    Danke für den CSS-Code auch von mir :thumbup::)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!