Hintergrundbilder in die Sidebar einfügen

  • Hallo zusammen,

    hab folgendes Problem. Ich versuche schon seit ner weile in die Sidebar 3 aufeinander folgende Hintergrundbilder einzufügen. Aber egal wie ich das nun versucht habe anzustellen misslingt mir das;(

    Das oberste wie auch das unterste sollte Fest stehend sein, und das mittler sollte sich der Sidebar anpassen .. da es ja nur eine Linie ist und die Sidebar ja nicht immer gleich groß bleibt.

    Versuche mit einem div Container schlugen fehl , sowie der Versuch in der Style.css sowas einzufügen;)

    Code
    background: url(images/sidebarrandoben.gif) top no-repeat;
                        url('images/sidebarmitte.gif') top 20px repeat-y;
                        url('images/sidebarrandunten.gif') bottom no-repeat;



    Naja und auch etliche andere Sachen, die möcht ich aber nicht unbedingt erwähnen, sonst bekomm ich nie ne Antwort weil sich alles schlapp lacht :mrgreen:

    Danke & Gruß
    Digital

    Digital-Deckz ( Netlabel 4 Electronic Music )

    • 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

  • Moin,

    bin selber Newbie, aber wenn Google nicht lügt, wird es erst mit CSS3 die Möglichkeit geben, mehrere Hintergrundbilder in ein und denselben DIV-Tag einzubinden

  • CSS3... wenn der Internet-Exploder 9 das eines Tages unterstützt, dann wird man das so ab 2015 verwenden können; so ab 2023 vielleicht sogar ohne CSS-Hacks. ;-)

    Das Problem mit mehreren Hintergrundbildern wird oft gelöst, indem man mehrere Ebenen übereinanderlegt und jede mit einem Bild versieht (hab leider keinen passenden Link). Finde ich allerdings unschön, da es den Seitenaufbau sowie das Scrollen verlangsamt und weil es potentiell das Layout zerhaut.

  • Hmm, vielleicht hab ich mich ja bissi doof ausgedrückt , aber sowas sollte es doch normal schon geben. Und nicht erst wenn ich graue Haare hab ;)

    Also was ich möchte, ist ein Hintergrundbild in die Sidebar einfügen. Das ich zuvor in 3 Teile gesliced hab. Oberer Teil - Mittelteil und eben der untere Teil.
    Der mittlere Teil sollte sich aber wiederholen , da man hier ja immer wieder Sachen hinzufügt.

    Gruß
    Digital

    Digital-Deckz ( Netlabel 4 Electronic Music )

  • derzeit musst Du - so wie Du das Bild in drei Teile zerlegt hast - auch drei div container dafür verwenden ;)

    also div.oben{erster background}
    div.mitte{zweiter sich wiederholender background}
    div.unten{dritter background der das Bild abschließt}

    hilft Dir das weiter?
    lg

  • Ja Monika, vielen Dank! Das hat mich schon mal auf den Pfad der Weisen gebracht ;) Nur mit der Umsetztung happert es noch etwas.

    In die Style.css hab ich folgendes eingefügt.


    Und in der Sidebar die 2 zusätzliche Div Container. Nur wie man sehen kann schaut das noch nicht ganz so aus wie gewünscht. Positiv ist, das sich das mittlere Feld wie gewünscht der Länge nach auf den verschiedenen Seiten anpasst. Auch das alle 3 Felder zu sehen sind. Der Hacken liegt bei ersten dem obersten Bild. Das wird vom mittleren Überdeckt :-(
    Sobald ich das mittlere beispielhalber rausnehme, sieht man das die anderen beiden, oben und unten richtig angezeigt werden.
    Kann mir da mal wer auf die Sprünge helfen, hab soviel nun ausprobiert das ich vor lauter <divs> und <dings> kein <durchblick> & eben <nix> mehr seh :lol:

    Digital-Deckz ( Netlabel 4 Electronic Music )

  • Die Elemente einer Seite werden in der Reihenfolge gerendert in welcher sie im Quelltext definiert werden. Dementsprechend ergibt sich auch der z-index.

    Grüße
    Mo

  • Die Elemente einer Seite werden in der Reihenfolge gerendert in welcher sie im Quelltext definiert werden. Dementsprechend ergibt sich auch der z-index.

    Grüße
    Mo



    hmm, Stirnrunzel :confused:

    Edit:
    Schnell mal gegoogelt. Ist das nicht grad das Gegenteil von dem was ich suche? Dieser Z-index gibt doch an das sich div überlappen (überdecken) , also je nach z-index angabe ist dieser obenauf.. ich möchte keine Layer, sondern 3 Bilder übereinander , aneinandergereiht , also es sollte sich keines überdecken.

    Digital-Deckz ( Netlabel 4 Electronic Music )

    Einmal editiert, zuletzt von digital (22. November 2006 um 14:03)

  • [FONT=Verdana][/FONT]
    [FONT=Verdana][/FONT]
    [FONT=Verdana]Hmm, so viele Themen stehen bei mir offen, da fühlt man sich richtig doof , wenn man bei dem ein oder anderen Thema nachfragt. [/FONT]
    [FONT=Verdana][/FONT]
    [FONT=Verdana]Ist das mit dem Hintergrund so einfach ´? Sorry wenn ich mich doof anstelle , aber ich verfüg eben noch nicht über soviel Knowledge in der Materie. Mach das auch erst paar Wochen.[/FONT]
    [FONT=Verdana][/FONT]
    [FONT=Verdana]Gruß[/FONT]
    [FONT=Verdana]Digital[/FONT]

    Digital-Deckz ( Netlabel 4 Electronic Music )

  • Hi!

    Ich wollte ein Theme auch abändern. Da hatte ich das gleiche Problem mit der Sidebar. Das mittlere Bild hat das obere überdeckt.
    Habe einfach ein Bild für oben genommen, das ziemlich lang ist. So reicht es bis zum "End-Bild"... So braucht man kein "sidebarmiddle" oder so was! :mrgreen: Vielleicht nicht die optimale Lösung.

  • Danke erstmal für die Antwort , und wie du schon sagst , optimal ist die Lösung wirklich nicht. So wie ich mir das grad vorstelle, passt sich die Sidebar ja nicht den gegebenheiten an.
    Und wie man nun sieht , bin ich nicht der einzigste der das Problem hat und kennt. Kann mir nur nicht vorstellen das keiner ne Lösung wüsste. Schliesslich machen soviele ja Themes für WP und <div> Container ist ja nix unbekanntes.
    Hoffe immernoch das sich einer der Moderatoren oder WP-Freaks sich erbahmt und mit ner Lösung auftaucht ;)
    Wie sagt man so schön , die Hoffnung stirbt als letztes :mrgreen:


    Gruß
    Digital

    Digital-Deckz ( Netlabel 4 Electronic Music )

  • 1. das erste Bild sollte doch nicht 100% hoch werden?

    HTML
    #sidebar {
     width: 180px;
            height: höhe des Schnipsels;
            background: url(images/sidebarrandoben.gif) top no-repeat;   
            
    }
    HTML
    #sidebarmiddle {
     width: 180px;
            
            background: url(images/sidebarmitte.gif) repeat-y;
        
    }


    hier werden vielleicht margin werte gebraucht, vielleicht sogar negative und vielleicht sogar welche für den IE und Browser

    sorry das ist sowas von unterschiedlich, weil es von dem Gesamt style abhängt :( da kann ich nicht mehr sagen


    HTML
    #sidebarbottom {
     width: 180px;
            background: url(images/sidebarrandunten.gif) no-repeat;
    height:höhe des Schnipsels in px;
           
    }

    so könnte es funktionieren
    lg

Jetzt mitmachen!

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