CSS Background Image Flexible Höhe

  • Hallo zusammen :wink:

    folgende Idee:

    Ein Notizzettel (siehe Anlage) soll variabel beschrieben werden.

    Hierbei wär es natürlich doof, wenn nur 1 Punkt eingegeben wird und der Zettel dann im restlichen Bereich leer ist. Daher wäre es klasse, wenn ich es so umsetzen könnte, dass sich die höhe des Containers am Inhalt orientiert.

    Soweit kein Problem, aber: Wie bekomm ich das mit der Hintergrundgrafik geregelt? Der obere Teil des Notizblocks wird ja immer korrekt angezeigt. Wenn es zu wenig Text-Elemente wären, würde der untere Teil abgeschnitten -> Sieht doof aus, wenn der Fußbereich fehlt.

    Jemand ne Idee wie ich das umsetzen kann? Tabellendarstellung mit festem Header & Footer Image? Oder eine bessere Lösung?

    • 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

  • du musst den Notizzettel in 3Teile zerlegen

    den oberen fixen Teil
    den flexiblen Mittelteil, für den Text
    und den fixen unteren Teil

    hab mal schnell ein Beispiel aus deinem Screen gebastelt

  • ach ja, wenn der Notizzettel eine Mindesthöhe haben soll, einfach min-height hinzufügen
    z.B. 100px

    Code
    .notiz {
    background:url(notiz.png) repeat-y scroll 0 top transparent;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
    [COLOR=Red]min-height: 100px;[/COLOR]
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    }

Jetzt mitmachen!

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