Grafik soll über ein div-Element hinausgehen

[Jonkins]

Hi :)
Ich bin aktuell auf ein Problem gestoßen, bei dem mir im Internet suchen nicht weitergeholfen hat. Ich bin dabei auf den Z-Index gestoßen, mit dem ich mich jedoch noch nicht wirklich befasst habe und der mir auf die Schnelle auch nicht geholfen hat.
Es geht darum, dass ein Div-Element mit den Eigenschaften

div.box-kopfbereich-rot {
    border-top: 3px solid #F22400;
    border-left: 3px solid #F22400;
    border-right: 3px solid #F22400;
    background-color: #FF8877;
}

ein Bild enthalten soll, welches über den border-Bereich hinweg reichen soll. Ich habe in Photoshop mal dargestellt wie es am Ende aussehen soll, da ich mich nicht so gut ausdrücken kann ^^.

Könnt ihr mir dabei helfen? :/
Vielen Dank im Voraus und noch ein schönes Fest!

[Camping_RIDER]

Aloha ;)

Es geht darum, dass ein Div-Element mit den Eigenschaften

div.box-kopfbereich-rot {
    border-top: 3px solid #F22400;
    border-left: 3px solid #F22400;
    border-right: 3px solid #F22400;
    background-color: #FF8877;
}

ein Bild enthalten soll, welches über den border-Bereich hinweg reichen soll.

Leider noch ein bisschen wenig konkrete Info. Darf div.box-kopfbereich-rot auf eine gewisse max-height bzw. height forciert werden? Dann könntest du mit overflow:visible und einer größeren height des img arbeiten.

Falls nicht müsste man sich was neues überlegen, z.B. absolute oder relative Positionierung (da diese das img aus dem Elementfluss holen. Ob das wie gewollt greift hängt aber auch von den Umständen ab. Z.B. könnte man das Bild u.U. per vertical-align:texttop und position:relative, top:-??px positionieren.

Grüße,

RIDER

[Jonkins]

Hi :D
Danke schon einmal für die Antwort :) Ja div.box-kopfbereich-rot darf auf jeden Fall eine Höhe bekommen.
Jetzt habe ich jedoch das Problem, dass das Bild nach unten ausweicht und nicht nach oben? :x

Absolute Positionierung kommt leider nicht in Frage.

Vielen Dank^^

[Matthias Apsel]

Om nah hoo pez nyeetz, Jonkins!

Jetzt habe ich jedoch das Problem, dass das Bild nach unten ausweicht und nicht nach oben? :x

vertical-align?

Matthias

[Jonkins]

Om nah hoo pez nyeetz, Jonkins!

Jetzt habe ich jedoch das Problem, dass das Bild nach unten ausweicht und nicht nach oben? :x

vertical-align?

Matthias

Damit lässt sich der Text neben meinem Bild bewegen, das Bild selbst jedoch nicht.

[Gunnar Bittersmann]

@@Jonkins:

nuqneH

Absolute Positionierung kommt leider nicht in Frage.

Doch, kommt.

Das Bild* wird "absolute" positioniert, und zwar nicht auf den Viewport bezogen, sondern auf den div.box-kopfbereich-rot**, was deshalb von "static" abweichend positioniert wird, nämlich "relative".

Qapla'

* Sollte das Bild nur der Verzierung dienen, wäre es als Hintergrundbild eines Pseudoelements angemessen.

** Blöder Klassenbezeichner, da präsentationsbezogen.