css image Positionierung

  • Hallo,
    ich steh´css-technisch gerade völlig auf dem Schlauch:
    Ich lasse in meiner Sidebar ein div ausgeben, welches ein Hintergrundbild hat und in der Größe mit width und height definiert ist. Das funkt soweit.
    In diesem div möchte ich nun ein Bild in der Ecke rechts unten positionieren (innerhalb des div und nicht des Browserfensters).
    Ich bekomm´s irgendwie nicht gebacken.
    Sinngemäß sieht´s im Moment so aus:

    Code
    <div style="width: 270px; height: 195px; background: url( link zum Hintergrundbild ) no-repeat; margin-bottom: 5px;" >
    <img src=" link zur Grafik " style="position: absolute; bottom: 0; right: 0;" alt="" border="0" />
    </div>

    Kann mir da mal jemand auf die Sprünge helfen?

    Danke im voraus.

    • 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

  • Das ist nicht ganz so einfach zu realisieren, was soll denn da passieren? Soll Text dadrüber sein?

    Denn dann könntest du einfach in das Div eine passende Grafil bauen wo unten rechts in der Ecke eben das andere Bild ist.

    Wenn Fische Fische fischen in Fischen, fischen Fische Fische in Fischen...

  • hi,

    es ist ganz einfach....

    du musst dem div, indem du etwas absolut positionieren möchtest eine position angabe machen, also z.b. position:relative, dem div zuteilen, indem etwas absolut positioniert werden soll...

    kapisch? ;)

    2. möglichkeit und "sauberer", falls dieses bild dem design dient, wäre noch eine div in das div rienzumachen und diesem das hintergrundbild zu zuteilen...

  • hallo shyne,
    also, wenn ich Dich richtig verstanden habe, sieht mein Code jetzt so aus:

    Code
    <div style="position: absolute; width: 270px; height: 195px; background: [URL="http://forum.wordpress-deutschland.org/vbglossar.php?do=showentry&item=url"]url[/URL]( link zum Hintergrundbild ) no-repeat;" >
      <div style="position: relative; bottom: 0; right: 0;">
        <img src=" link zur Grafik " alt="" border="0" />
      </div>
    </div>

    Wenn Du das so gemeint hast, bringt das aber nicht das Ergebnis, wo ich hin möchte. So wird die Grafik rechts unten im Browserfenster angezeigt und nicht rechts unten im div.:-?

    Bin ich völlig auf dem Holzweg?

  • jetzt hab´ich´s.
    Man, manchmal steht man wirklich auf der Leitung.
    Gelöst habe ich das jetzt mit float und nicht mit position:

    Code
    <div style="position: absolute; width: 270px; height: 195px; background: url( link zum Hintergrundbild ) no-repeat;">
      <div style="float: left; margin: 100px 0 0 -7px;">
        <img src="'link zum Bild" id="untenlinks" alt="" border="0" />
      </div>
    </div>

Jetzt mitmachen!

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